/* ────────────────────────────────────────────────────────────────────────── Blog rich-content styling, scoped to .rt-prose. The redesign v2 layout (layouts/redesign.blade.php + css/redesign-v2.css) does NOT load Bootstrap nor the legacy css/redesign.css, so blog post bodies — authored for the old Bootstrap layout — render almost unstyled: no heading scale, borderless tables (the chrome's `*{border-width:0}` reset strips them), and dead card / accordion / grid / badge / alert components. This file restores that. Two parts, both confined to .rt-prose so nothing leaks onto the redesign chrome (header/footer): 1. Prose base + legacy rich-content compat — ported 1:1 from the designed .rt-prose rules in public/css/redesign.css (which v2 never loaded). 2. The Bootstrap 5.3 component subset the post bodies actually use (grid, card, accordion mechanics, list-group, badge, utilities) — only the classes seen in content, no Reboot, so zero chrome bleed. Companion assets loaded alongside on the blog page: - public/assets/style.css → custom classes (ciekawostka-*, category-color-*, .accordion-button skin, .container, .bg-light) - FontAwesome → +/× icon in .accordion-button::before - bootstrap.bundle.min.js → accordion collapse behaviour ────────────────────────────────────────────────────────────────────────── */ /* ── 1. Prose base (ported from redesign.css .rt-prose) ───────────────────── */ .rt-prose h1 { font-size: 2em; font-weight: 600; letter-spacing: -.025em; color: #0c0a09; margin: 0 0 .6em; line-height: 1.1; } .rt-prose h2 { font-size: 1.6em; font-weight: 600; letter-spacing: -.02em; color: #0c0a09; margin: 1.8em 0 .6em; } .rt-prose h3 { font-size: 1.3em; font-weight: 600; letter-spacing: -.01em; color: #0c0a09; margin: 1.5em 0 .5em; } .rt-prose h4 { font-size: 1.1em; font-weight: 600; color: #0c0a09; margin: 1.3em 0 .4em; } .rt-prose h5 { font-size: 1em; font-weight: 700; color: #0c0a09; margin: 1.2em 0 .35em; } .rt-prose p { margin: 0 0 1.1em; } .rt-prose a { color: #1e40af; text-decoration: underline; text-underline-offset: 2px; } .rt-prose a:hover { color: #1e3a8a; } .rt-prose ul, .rt-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; } .rt-prose ul { list-style: disc; } .rt-prose ol { list-style: decimal; } .rt-prose li { margin: .35em 0; } .rt-prose strong { color: #1c1917; font-weight: 600; } .rt-prose img { border-radius: 10px; margin: 1.2em 0; max-width: 100%; height: auto; } .rt-prose hr { border: none; border-top: 1px solid #e7e5e4; margin: 1.8em 0; } .rt-prose h2[id], .rt-prose h3[id] { scroll-margin-top: 90px; } .rt-prose blockquote { border-left: 3px solid #93c5fd; background: #eff6ff; border-radius: 0 8px 8px 0; padding: .9em 1.1em; color: #1e3a5f; font-style: normal; margin: 1.3em 0; } .rt-prose blockquote p:last-child { margin-bottom: 0; } /* Tables (chrome reset zeroes borders — re-assert them here) */ .rt-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .9em; } .rt-prose th, .rt-prose td { border: 1px solid #e7e5e4; padding: .5em .75em; text-align: left; vertical-align: top; } .rt-prose th { background: #f4f4f3; font-size: .82em; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; } .rt-prose table.table { border: 1px solid #e7e5e4; border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; } .rt-prose .table-responsive, .rt-prose .table-responsive-custom { overflow-x: auto; } .rt-prose .text-muted { color: #78716c; } /* ── 2a. Bootstrap grid (only variants seen in content) ───────────────────── */ .rt-prose .container { width: 100%; margin-right: auto; margin-left: auto; } .rt-prose .row { display: flex; flex-wrap: wrap; margin-right: -.75rem; margin-left: -.75rem; } .rt-prose .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: .75rem; padding-left: .75rem; margin-top: 1rem; } .rt-prose .col { flex: 1 0 0%; } .rt-prose .row-cols-1 > * { flex: 0 0 auto; width: 100%; } @media (min-width: 768px) { .rt-prose .col-md-4 { flex: 0 0 auto; width: 33.3333%; } .rt-prose .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; } } @media (min-width: 992px) { .rt-prose .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333%; } } .rt-prose .h-100 { height: 100% !important; } /* ── 2b. Card ─────────────────────────────────────────────────────────────── */ .rt-prose .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; border: 1px solid #e7e5e4; border-radius: 10px; margin: 0; } .rt-prose .card-body { flex: 1 1 auto; padding: 1.1rem 1.25rem; } .rt-prose .card-title { margin: 0 0 .5rem; font-weight: 600; color: #1c1917; } .rt-prose .card-subtitle { margin: -.25rem 0 0; color: #78716c; } .rt-prose .card-text { margin: 0 0 .5rem; } .rt-prose .card-text:last-child { margin-bottom: 0; } /* ── 2c. Accordion — structure + collapse; skin comes from legacy style.css ─── */ .rt-prose .accordion-item { background-color: #fff; border: 1px solid #e7e5e4; border-radius: 10px; margin-bottom: 8px; overflow: hidden; } .rt-prose .accordion-header { margin: 0; } .rt-prose .accordion-button { position: relative; display: flex; align-items: center; width: 100%; /* left padding intentionally omitted — style.css sets 3rem to fit its ::before +/× icon */ padding-top: .9rem; padding-right: 1.1rem; padding-bottom: .9rem; color: #1c1917; text-align: left; background-color: #fff; border: 0; border-radius: 0; overflow-anchor: none; cursor: pointer; } .rt-prose .accordion-button:not(.collapsed) { background-color: #eff6ff; } .rt-prose .accordion-button::after { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-left: auto; content: ""; background-repeat: no-repeat; background-size: 1.1rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); transition: transform .2s ease-in-out; } .rt-prose .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } .rt-prose .accordion-body { padding: 1rem 1.25rem; } .rt-prose .collapse:not(.show) { display: none; } .rt-prose .collapsing { height: 0; overflow: hidden; transition: height .35s ease; } /* ── 2d. List group ───────────────────────────────────────────────────────── */ .rt-prose .list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 10px; } .rt-prose .list-group-item { position: relative; display: block; padding: .6rem 1rem; color: #44403c; background-color: #fff; border: 1px solid #e7e5e4; } .rt-prose .list-group-item + .list-group-item { border-top-width: 0; } .rt-prose .list-group-flush { border-radius: 0; } .rt-prose .list-group-flush > .list-group-item { border-width: 0 0 1px; } /* ── 2e. Badge + bg/text utilities ────────────────────────────────────────── */ .rt-prose .badge { display: inline-block; padding: .35em .6em; font-size: .75em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 6px; } .rt-prose .bg-warning { background-color: #ffc107 !important; } .rt-prose .bg-primary { background-color: #0d6efd !important; } .rt-prose .text-dark { color: #212529 !important; } .rt-prose .text-white { color: #fff !important; } .rt-prose .text-primary { color: #0d6efd !important; } .rt-prose .text-center { text-align: center !important; } /* ── 2f. Alert (legacy → left-border callout, ported from redesign.css) ─────── */ .rt-prose .alert { border: 1px solid; border-left-width: 3px; border-radius: 0 8px 8px 0; padding: .85em 1.1em; margin: 1.2em 0; font-size: .95em; } .rt-prose .alert-heading { margin-top: 0; color: inherit; } .rt-prose .alert-info, .rt-prose .alert-primary { background: #eff6ff; border-color: #bfdbfe; border-left-color: #2563eb; color: #1e3a5f; } .rt-prose .alert-success { background: #ecfdf5; border-color: #a7f3d0; border-left-color: #059669; color: #065f46; } .rt-prose .alert-warning { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; color: #78350f; } .rt-prose .alert-danger { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; color: #991b1b; } /* ── 2g. Typography / spacing utilities ───────────────────────────────────── */ .rt-prose .lead { font-size: 1.2rem; font-weight: 400; color: #57534e; } .rt-prose .small { font-size: .875em; } .rt-prose .mb-0 { margin-bottom: 0 !important; } .rt-prose .mb-1 { margin-bottom: .25rem !important; } .rt-prose .mb-2 { margin-bottom: .5rem !important; } .rt-prose .mb-3 { margin-bottom: 1rem !important; } .rt-prose .mb-4 { margin-bottom: 1.5rem !important; } .rt-prose .mb-5 { margin-bottom: 3rem !important; } .rt-prose .mt-2 { margin-top: .5rem !important; } .rt-prose .mt-3 { margin-top: 1rem !important; } .rt-prose .mt-4 { margin-top: 1.5rem !important; } /* ── 2h. Wrapper .blog-entry (dokleja go TableOfContentsGenerator) ────────── Legacy assets/style.css narzuca mu Arial / color:#333 / nagłówki #2c3e50 — neutralizujemy, żeby treść dziedziczyła typografię serwisu (i kolor z .rt-prose, który przełącza się w dark mode). */ .rt-prose .blog-entry { font-family: inherit; color: inherit; max-width: none; } .rt-prose .blog-entry h1, .rt-prose .blog-entry h2, .rt-prose .blog-entry h3, .rt-prose .blog-entry h4, .rt-prose .blog-entry h5 { color: #0c0a09; } /* ── 2i. Klasy z treści bez definicji na V2 (Bootstrap nie jest ładowany) ── */ .rt-prose .bg-light { background-color: #f8f9fa !important; } .rt-prose .border-primary { border-color: #0d6efd !important; } /* ── 3. DARK MODE — treść bloga (scoped .rt-prose). Aktywne przy html[data-rd-theme="dark"] ── */ html[data-rd-theme="dark"] .rt-prose { color: var(--rd-slate); } html[data-rd-theme="dark"] .rt-prose h1, html[data-rd-theme="dark"] .rt-prose h2, html[data-rd-theme="dark"] .rt-prose h3, html[data-rd-theme="dark"] .rt-prose h4, html[data-rd-theme="dark"] .rt-prose h5, html[data-rd-theme="dark"] .rt-prose strong, html[data-rd-theme="dark"] .rt-prose .card-title { color: var(--rd-ink); } html[data-rd-theme="dark"] .rt-prose a { color: var(--rd-blue-d); } html[data-rd-theme="dark"] .rt-prose a:hover { color: var(--rd-blue); } html[data-rd-theme="dark"] .rt-prose .text-muted, html[data-rd-theme="dark"] .rt-prose .card-subtitle { color: var(--rd-muted); } html[data-rd-theme="dark"] .rt-prose .lead { color: var(--rd-slate); } html[data-rd-theme="dark"] .rt-prose .list-group-item { color: var(--rd-slate); } /* ramki / linie */ html[data-rd-theme="dark"] .rt-prose hr, html[data-rd-theme="dark"] .rt-prose th, html[data-rd-theme="dark"] .rt-prose td, html[data-rd-theme="dark"] .rt-prose table.table, html[data-rd-theme="dark"] .rt-prose .card, html[data-rd-theme="dark"] .rt-prose .accordion-item, html[data-rd-theme="dark"] .rt-prose .list-group-item { border-color: var(--rd-line); } /* powierzchnie */ html[data-rd-theme="dark"] .rt-prose th { background: var(--rd-soft-2); } html[data-rd-theme="dark"] .rt-prose .card, html[data-rd-theme="dark"] .rt-prose .accordion-item, html[data-rd-theme="dark"] .rt-prose .accordion-button, html[data-rd-theme="dark"] .rt-prose .list-group-item { background-color: var(--rd-white); } html[data-rd-theme="dark"] .rt-prose .accordion-button { color: var(--rd-ink); } html[data-rd-theme="dark"] .rt-prose .accordion-button:not(.collapsed) { background-color: var(--rd-blue-l); } /* chevron akordeonu — jasny stroke na ciemnym */ html[data-rd-theme="dark"] .rt-prose .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23E7EDF3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } /* blockquote */ html[data-rd-theme="dark"] .rt-prose blockquote { background: var(--rd-blue-l); border-left-color: var(--rd-blue); color: var(--rd-slate); } /* utili tekstu z !important w oryginale — wymagają !important */ html[data-rd-theme="dark"] .rt-prose .text-dark { color: var(--rd-ink) !important; } html[data-rd-theme="dark"] .rt-prose .text-primary { color: var(--rd-blue-d) !important; } /* alerty (callouty) — tło + tekst + ramka na tokeny, lewa kreska (akcent) zostaje */ html[data-rd-theme="dark"] .rt-prose .alert-info, html[data-rd-theme="dark"] .rt-prose .alert-primary { background: var(--rd-blue-l); border-color: var(--rd-blue-bd); color: var(--rd-blue-d); } html[data-rd-theme="dark"] .rt-prose .alert-success { background: var(--rd-green-l); border-color: var(--rd-green-bd); color: var(--rd-green-tx); } html[data-rd-theme="dark"] .rt-prose .alert-warning { background: var(--rd-amber-bg); border-color: var(--rd-amber-bd); color: var(--rd-amber-tx); } html[data-rd-theme="dark"] .rt-prose .alert-danger { background: #2A1618; border-color: #4A2626; color: #F1A0A0; } /* badge bg-warning zostaje żółty — tekst musi pozostać ciemny (ogólna reguła .text-dark → --rd-ink dałaby jasny tekst na żółtym) */ html[data-rd-theme="dark"] .rt-prose .bg-warning.text-dark, html[data-rd-theme="dark"] .rt-prose .bg-warning .text-dark { color: #1c1917 !important; } html[data-rd-theme="dark"] .rt-prose .bg-light { background-color: var(--rd-soft-2) !important; } /* ── 3b. DARK — spis treści (inline