/** * Historie pacjentów — reusable Vercel-style single view. * Ładowane na wpisach CPT `historie_pacjentow`, które zawierają marker * `rpc-story-template-v1`. * Odwzorowuje design z Vercel (Tailwind: Lato, gold #caa660, krem #fdfaf6, clinic-black #0a0a0a). * Wszystkie reguły bazują na przenośnych klasach `rpc-story-*`, a nie na * technicznych `uniqueID` Kadence ani ID konkretnego wpisu. * * WAŻNE (naprawione bugi): generyczne reguły `> p` (tekst body) NIE mogą łapać nagłówków * Kadence renderowanych jako

(htmlTag:"p") — dlatego wszędzie `:not(.wp-block-kadence-advancedheading)`. * Cytaty: font-weight 300 (Lato nie ma wagi 200 → przeglądarka schodziła do Lato 100 „hairline" = niewidoczne). */ /* ---------- Kontener: pełna szerokość na tej podstronie (Kadence row centruje treść) ---------- */ body.rpc-historie-template .container-fluid.rpc_menu-margin > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* ---------- Breadcrumb zgodny z projektem ---------- */ /* Projekt korzysta z breadcrumbu zapisanego jako edytowalny blok w treści. Czarny pas i linia są rozciągnięte na cały viewport, a sama treść pozostaje wyrównana z głównym kontenerem. Globalny breadcrumb motywu jest ukryty. */ body.rpc-historie-template .rpc-breadcrumbs { display: none !important; } body.rpc-historie-template header#masthead { margin-bottom: 0 !important; } body.rpc-historie-template .rpc-story-breadcrumb { position: relative; z-index: 1; isolation: isolate; width: 100%; max-width: 1232px; margin-bottom: 40px; margin-right: auto; margin-left: auto; background: #0a0a0a; } body.rpc-historie-template .rpc-story-breadcrumb::after { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; content: ""; transform: translateX(-50%); background: #0a0a0a; } body.rpc-historie-template .rpc-story-breadcrumb::before { position: absolute; z-index: 1; top: 0; left: 50%; width: 100vw; height: 1px; content: ""; transform: translateX(-50%); background: rgba(255, 255, 255, 0.18); } body.rpc-historie-template .rpc-story-breadcrumb > .kt-row-column-wrap { max-width: 1232px; padding: 18px 0 !important; } body.rpc-historie-template .rpc-story-breadcrumb .rank-math-breadcrumb, body.rpc-historie-template .rpc-story-breadcrumb .rank-math-breadcrumb p { display: flex; flex-flow: row wrap !important; align-content: center !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; margin: 0 !important; font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px !important; line-height: 20px !important; text-align: left !important; } body.rpc-historie-template .rpc-story-breadcrumb .rank-math-breadcrumb a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color 0.2s ease; } body.rpc-historie-template .rpc-story-breadcrumb .rank-math-breadcrumb a:hover, body.rpc-historie-template .rpc-story-breadcrumb .rank-math-breadcrumb a:focus-visible { color: #caa660; } body.rpc-historie-template .rpc-story-breadcrumb .last { color: #ffffff; } body.rpc-historie-template .rpc-story-breadcrumb .separator { display: inline-block !important; margin: 0 10px; color: rgba(255, 255, 255, 0.55); } @media (max-width: 767px) { body.rpc-historie-template .rpc-story-breadcrumb { width: 100%; max-width: 100%; margin-bottom: 24px; } body.rpc-historie-template .rpc-story-breadcrumb > .kt-row-column-wrap { padding: 14px 0 !important; } body.rpc-historie-template .rpc-story-breadcrumb .rank-math-breadcrumb, body.rpc-historie-template .rpc-story-breadcrumb .rank-math-breadcrumb p { align-items: flex-start !important; font-size: 12px !important; line-height: 18px !important; } body.rpc-historie-template .rpc-story-breadcrumb .separator { margin: 0 7px; } } /* Bootstrapowy `.row` ma ujemne marginesy. Przy pełnoszerokim layoucie wpisu powodowały one poziomy scroll na telefonach i przesuwały kontener o 7 px. */ body.rpc-historie-template .container-fluid.rpc_menu-margin > .row { margin-left: 0; margin-right: 0; } /* ---------- Układ 2 kolumny: main ~800 / sidebar ~368 / gap 64 (jak grid-cols-12: 8/4) ---------- Design: kontener 1232, main col-span-8 = 800px, aside col-span-4 = 368px, gap-16 = 64px. Kadence renderuje row jako CSS grid — nadpisujemy grid-template-columns i gap (tylko ≥992px). */ body.rpc-historie-template .rpc-story-layout > .kt-row-column-wrap { max-width: 1232px !important; margin-left: auto !important; margin-right: auto !important; } @media (min-width: 992px) { body.rpc-historie-template .rpc-story-layout > .kt-row-column-wrap { /* sidebar węższy + większy odstęp niż w designie (życzenie): main ~805 / side ~340 / gap 90 */ grid-template-columns: minmax(0, 805fr) minmax(0, 337fr) !important; column-gap: 90px !important; grid-column-gap: 90px !important; } } /* ---------- Baza typografii (Lato, jak w designie) ---------- */ body.rpc-historie-template .historia-pacjenta__content { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #374151; } body.rpc-historie-template .historia-pacjenta__content .wp-block-kadence-advancedheading, body.rpc-historie-template .historia-pacjenta__content h1, body.rpc-historie-template .historia-pacjenta__content h2, body.rpc-historie-template .historia-pacjenta__content h3, body.rpc-historie-template .historia-pacjenta__content h4, body.rpc-historie-template .historia-pacjenta__content p, body.rpc-historie-template .historia-pacjenta__content a, body.rpc-historie-template .historia-pacjenta__content li, body.rpc-historie-template .historia-pacjenta__content span { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* ---------- Badge kategorii (pill) — biały tekst na złocie ---------- Kadence przenosi className na wrapper , gdy nagłówek jest linkiem. Padding musi być na właściwym nagłówku, inaczej złote tło zaczyna się 16 px dalej niż tytuł i pozostała treść. */ body.rpc-historie-template .rpc-story-category { display: inline-block; padding: 0 !important; color: #ffffff !important; } body.rpc-historie-template .rpc-story-category.wp-block-kadence-advancedheading, body.rpc-historie-template .rpc-story-category > .wp-block-kadence-advancedheading { border-radius: 9999px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; padding: 6px 16px !important; line-height: 1 !important; color: #ffffff !important; } /* ---------- H1 (lekki, duży, jak text-5xl font-light) ---------- */ body.rpc-historie-template .rpc-story-title, body.rpc-historie-template .rpc-story-title .kb-inline-dynamic { font-weight: 300 !important; font-size: 48px !important; line-height: 1.2 !important; letter-spacing: -0.015em; color: #0a0a0a !important; } @media (max-width: 767px) { body.rpc-historie-template .rpc-story-title, body.rpc-historie-template .rpc-story-title .kb-inline-dynamic { font-size: 32px !important; } } /* ---------- Zdjęcie wyróżniające: 4:3 ---------- */ body.rpc-historie-template .rpc-story-hero .kb-is-ratio-image { aspect-ratio: 4 / 3; padding-bottom: 0 !important; height: auto !important; } /* ---------- Box: O pacjentce + Spis treści ---------- */ body.rpc-historie-template .rpc-story-patient-info > .kt-inside-inner-col { padding: 48px !important; } body.rpc-historie-template .rpc-story-toc-panel > .kt-inside-inner-col { padding: 48px 48px 48px 56px !important; display: flex; flex-direction: column; justify-content: center; } body.rpc-historie-template .rpc-story-patient-label { letter-spacing: 0.16em !important; } body.rpc-historie-template .rpc-story-patient-name { font-weight: 300 !important; letter-spacing: -0.01em; } /* Spis treści — numerowane kółka */ body.rpc-historie-template .rpc-toc { list-style: none !important; margin: 0 !important; padding: 0 !important; counter-reset: rpctoc; display: flex; flex-direction: column; gap: 16px; } body.rpc-historie-template .rpc-toc li { counter-increment: rpctoc; display: flex; align-items: center; gap: 16px; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.rpc-historie-template .rpc-toc li::marker { content: ""; font-size: 0; } body.rpc-historie-template .rpc-toc li::before { content: counter(rpctoc); flex: 0 0 auto; width: 24px; height: 24px; border-radius: 9999px; background: #f3f3f3; color: #737373; font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; } body.rpc-historie-template .rpc-toc li:hover::before { background: #f5eede; color: #b59556; } body.rpc-historie-template .rpc-toc a { color: #262626; font-size: 15px; font-weight: 300; text-decoration: none; transition: color .2s, transform .2s; } body.rpc-historie-template .rpc-toc li:hover a { color: #0a0a0a; transform: translateX(3px); } /* ---------- Nagłówki H2 sekcji + offset kotwicy ---------- */ /* Klasa jest przenośna; kotwice pozostają edytowalne dla spisu treści. */ body.rpc-historie-template .rpc-story-section-title { scroll-margin-top: 110px; font-weight: 300 !important; color: #0a0a0a !important; font-size: 30px !important; line-height: 1.25 !important; } /* ---------- Lead paragraph (pierwszy akapit — text-xl) ---------- */ body.rpc-historie-template .rpc-story-lead { font-size: 20px !important; font-weight: 300 !important; line-height: 1.65 !important; color: #1f2937 !important; } /* ---------- Akapity treści (prose-lg 18px) — tylko zwykłe

, nie nagłówki Kadence ---------- */ body.rpc-historie-template .rpc-story-main > .kt-inside-inner-col > p:not(.wp-block-kadence-advancedheading) { font-size: 16px; line-height: 1.625; color: #1f2937; font-weight: 300; margin: 0 0 20px; } body.rpc-historie-template .rpc-story-main > .kt-inside-inner-col > p:not(.wp-block-kadence-advancedheading) a { color: #0a0a0a; font-weight: 500; text-decoration: none; border-bottom: 1px solid #caa660; padding-bottom: 1px; transition: border-color .2s; } body.rpc-historie-template .rpc-story-main > .kt-inside-inner-col > p:not(.wp-block-kadence-advancedheading) a:hover { border-color: #0a0a0a; } body.rpc-historie-template .rpc-story-main > .kt-inside-inner-col > p:not(.wp-block-kadence-advancedheading) strong { color: #caa660; font-weight: 500; } /* "I pamiętam ten dzień…" — akapit wyróżniony (medium) */ body.rpc-historie-template .rpc-story-highlight { font-size: 20px !important; font-weight: 500 !important; line-height: 1.6 !important; color: #1f2937 !important; } /* ---------- Callout boxy (info / tip) ---------- */ /* Tytuł callout — nagłówek Kadence (fe_info / fe_checkCircle). NIE może zejść do stylu body-p. */ body.rpc-historie-template .rpc-story-callout .kt-inside-inner-col > .wp-block-kadence-advancedheading { color: #111827 !important; font-weight: 600 !important; font-size: 18px !important; line-height: 1.4 !important; margin: 0 0 16px !important; } /* Treść callout — tylko zwykły akapit (has-small-font-size), nie nagłówek */ body.rpc-historie-template .rpc-story-callout .kt-inside-inner-col > p:not(.wp-block-kadence-advancedheading) { font-size: 16px !important; line-height: 1.7 !important; color: #374151 !important; font-weight: 300 !important; margin: 0 !important; } /* Ikona callout — złota, wyrównana do góry tytułu */ body.rpc-historie-template .rpc-story-callout .wp-block-kadence-advancedheading .kt-blocks-icon-wrap svg { color: #caa660 !important; stroke: #caa660 !important; } /* ---------- Karta lekarza ---------- */ /* Układ: zdjęcie 160px + tekst tuż obok (gap 32px), wyśrodkowane w pionie — jak flex gap-8 items-center w designie. Nadpisujemy grid wiersza (left-third dawał tekst daleko od zdjęcia). */ @media (min-width: 768px) { body.rpc-historie-template .rpc-story-doctor > .kt-row-column-wrap { grid-template-columns: 160px 1fr !important; column-gap: 32px !important; align-items: center !important; } } body.rpc-historie-template .rpc-story-doctor-media > .kt-inside-inner-col { padding: 0 !important; } body.rpc-historie-template .rpc-story-doctor-image { max-width: 160px !important; margin: 0 !important; } body.rpc-historie-template .rpc-story-doctor-media img { filter: grayscale(100%); transition: filter .5s ease; } body.rpc-historie-template .rpc-story-doctor-media img:hover { filter: grayscale(0); } /* Imię lekarza (doc-005) — 24px, lekki, czarny. NIE styl body-p. */ body.rpc-historie-template .rpc-story-doctor-name { font-weight: 300 !important; font-size: 24px !important; color: #0a0a0a !important; line-height: 1.25 !important; margin: 0 0 4px !important; } /* Specjalizacja (doc-006) — 10px, złote wersaliki */ body.rpc-historie-template .rpc-story-doctor-specialty { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; } /* Opis lekarza — tylko zwykły akapit (nie nagłówki doc-005/006); lekki (300), nie 400 */ body.rpc-historie-template .rpc-story-doctor-content .kt-inside-inner-col > p:not(.wp-block-kadence-advancedheading) { font-size: 14px !important; line-height: 1.6 !important; color: #4b5563 !important; font-weight: 300 !important; margin: 0 0 16px !important; } /* ---------- Pull quote (krem, wyśrodkowany, z ikoną cudzysłowu) ---------- */ body.rpc-historie-template .rpc-story-quote .kt-inside-inner-col::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 22px; background: url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* Tekst cytatu — waga 300 (Lato nie ma 200!), widoczny szary, italic */ body.rpc-historie-template .rpc-story-quote-text { font-weight: 300 !important; color: #4b5563 !important; font-style: italic !important; line-height: 1.6 !important; } body.rpc-historie-template .rpc-story-quote-text--large { font-size: 20px !important; } body.rpc-historie-template .rpc-story-quote-text--small { font-size: 18px !important; } /* ---------- Przed / Po ---------- */ /* Kolor jak w buildzie Vercel: gray-800 (klasa text-gold-900 nie istnieje → fallback do gray-800). */ body.rpc-historie-template .rpc-story-before-after-title { font-weight: 300 !important; color: #1f2937 !important; font-size: 20px !important; } body.rpc-historie-template .rpc-story-before-after-column .kt-svg-icon-list-text { font-size: 16px !important; color: #374151 !important; font-weight: 300; } /* ---------- FAQ (osobne karty, jak

w designie) ---------- */ body.rpc-historie-template .rpc-story-faq-title { font-weight: 300 !important; color: #b59556 !important; } /* Pojedynczy, cienki border 1px wokół całej karty — bez nakładających się borderów Kadence. */ body.rpc-historie-template .rpc-story-faq .kt-accordion-pane { margin-bottom: 16px; border: 1px solid #f1f2f4 !important; } body.rpc-historie-template .rpc-story-faq .kt-accordion-header-wrap, body.rpc-historie-template .rpc-story-faq .kt-blocks-accordion-header, body.rpc-historie-template .rpc-story-faq .kt-accordion-panel, body.rpc-historie-template .rpc-story-faq .kt-accordion-panel-inner { border: 0 !important; } /* Aktywny panel — bez pogrubionej złotej krawędzi (design nie ma) */ body.rpc-historie-template .rpc-story-faq .kt-accordion-pane-active, body.rpc-historie-template .rpc-story-faq .kt-accordion-pane.kt-accordion-pane-active { border-color: #f1f2f4 !important; } body.rpc-historie-template .rpc-story-faq .kt-blocks-accordion-header { padding: 22px 24px !important; font-weight: 500 !important; color: #111827 !important; font-size: 16px !important; } body.rpc-historie-template .rpc-story-faq .kt-blocks-accordion-header:hover .kt-blocks-accordion-title { color: #caa660; } /* Strzałka chevron — dokładnie jak w Vercel: SVG (path M6 9l6 6 6-6), 20px, stroke 1.5, złoty. Ukrywamy domyślne paski Kadence (::before/::after) i rysujemy chevron jako tło. */ body.rpc-historie-template .rpc-story-faq .kt-blocks-accordion-icon-trigger::before, body.rpc-historie-template .rpc-story-faq .kt-blocks-accordion-icon-trigger::after { display: none !important; } body.rpc-historie-template .rpc-story-faq .kt-blocks-accordion-icon-trigger { background-image: url("data:image/svg+xml,") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important; transition: transform .3s ease !important; } body.rpc-historie-template .rpc-story-faq .kt-blocks-accordion-header[aria-expanded="true"] .kt-blocks-accordion-icon-trigger { transform: rotate(180deg) !important; } body.rpc-historie-template .rpc-story-faq .kt-accordion-panel-inner { padding: 0 24px 22px !important; } body.rpc-historie-template .rpc-story-faq .kt-accordion-panel-inner p { font-size: 16px !important; color: #4b5563 !important; font-weight: 300 !important; line-height: 1.7 !important; } /* ---------- CTA ---------- */ body.rpc-historie-template .rpc-story-cta-title { font-weight: 300 !important; font-size: 30px !important; color: #0a0a0a !important; } body.rpc-historie-template .rpc-story-cta-title::after { content: ""; display: block; width: 64px; height: 2px; background: #caa660; margin: 22px auto 0; } body.rpc-historie-template .rpc-story-cta-text { color: #6b7280 !important; font-size: 16px !important; } /* ---------- Ukryj link „Zobacz inne historie" (nie ma go w designie) ---------- */ body.rpc-historie-template .rpc-story-other-link { display: none !important; } /* ---------- Sidebar sticky + nagłówek ---------- */ body.rpc-historie-template .rpc-story-sidebar > .kt-inside-inner-col { position: sticky; top: 120px; } body.rpc-historie-template .rpc-story-sidebar-title { font-weight: 300 !important; font-size: 20px !important; color: #0a0a0a !important; } /* Karty historii w sidebarze — odstępy jak space-y-10 (40px) */ body.rpc-historie-template .rpc-story-sidebar .kb-query-item { margin-bottom: 40px !important; } body.rpc-historie-template .rpc-story-sidebar .kb-query-item:last-child { margin-bottom: 0 !important; } /* Miniatury 4:3 jak w designie */ body.rpc-historie-template .rpc-story-sidebar .kb-is-ratio-image { aspect-ratio: 4 / 3 !important; padding-bottom: 0 !important; height: auto !important; } /* Tytuł karty — medium, clinic-black, ~18px */ body.rpc-historie-template .rpc-story-sidebar h2.wp-block-kadence-advancedheading, body.rpc-historie-template .rpc-story-sidebar h3.wp-block-kadence-advancedheading { font-size: 18px !important; font-weight: 600 !important; color: #0a0a0a !important; line-height: 1.35 !important; } /* „Czytaj dalej" → osobny wiersz „CZYTAJ DALEJ" (uppercase, złoty, tracked) */ body.rpc-historie-template .rpc-story-sidebar .wp-block-post-excerpt__more-link { display: block; margin-top: 12px; color: #caa660 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-decoration: none !important; } /* Wygaś wielokropek/spację przed „Czytaj dalej" gdy jest na osobnej linii */ body.rpc-historie-template .rpc-story-sidebar .wp-block-post-excerpt__more-link::before { content: none !important; }