/* ================================================================ dbajoogrod.pl — treść artykułu blogowego Kontener: section.blog_detail-inner-section > .blog-info > .blo-detail-text Poprawki: odstępy przy nagłówkach + listy punktowane (punktor + typografia identyczna jak w akapitach). Font i kolory dziedziczone z motywu — nic nie nadpisujemy. GDZIE WKLEIĆ: podstrony blogowe wczytują dodatkowo /style.css (ostatni w , za responsive.css) — to najlepsze miejsce. ================================================================ */ /* --- 1. PUSTY AKAPIT NA KOŃCU (z edytora) ----------------------- */ .blo-detail-text > p:empty, .blo-detail-text > p:last-child:empty { display: none; } /* --- 2. KONTENER I AKAPITY -------------------------------------- */ .blo-detail-text { line-height: 1.8; /* ==== KOLOR TREŚCI ==== Ta jedna wartość steruje kolorem akapitów ORAZ list, więc zawsze będą identyczne. Sprawdź w DevTools kolor akapitu w artykule i wpisz go tutaj, jeśli różni się od poniższego. */ --tresc-kolor: #777777; } .blo-detail-text p, .blo-detail-text ul > li, .blo-detail-text ol > li { color: var(--tresc-kolor) !important; } .blo-detail-text p { margin: 0 0 16px; line-height: 1.8; } /* --- 3. NAGŁÓWKI — odstępy i skala ------------------------------ */ /* Margines górny większy od dolnego: nagłówek ma wizualnie należeć do tekstu POD nim, nie do akapitu nad. */ .blo-detail-text h2 { font-size: 24px; line-height: 1.35; margin: 34px 0 14px; padding-bottom: 9px; border-bottom: 1px solid #ececec; } .blo-detail-text h3 { font-size: 18px; line-height: 1.4; margin: 26px 0 10px; } .blo-detail-text h4 { font-size: 16px; line-height: 1.4; margin: 22px 0 8px; } /* Nagłówek pod nagłówkiem — sekcja FAQ (H2 + H3 pytanie) */ .blo-detail-text h2 + h3 { margin-top: 18px; } /* Nagłówek zaraz po liście — nieco większy oddech */ .blo-detail-text ul + h2, .blo-detail-text ol + h2 { margin-top: 38px; } .blo-detail-text ul + h3, .blo-detail-text ol + h3 { margin-top: 30px; } /* Nagłówki są w treści justowane inline (style="text-align: justify") — dla nagłówka justowanie nie ma sensu, prostujemy do lewej. */ .blo-detail-text h2, .blo-detail-text h3, .blo-detail-text h4 { text-align: left !important; } /* --- 4. LISTY PUNKTOWANE ---------------------------------------- */ /* Motyw resetuje ul/li globalnie (menu, stopka, breadcrumb) i narzuca im własną typografię. Przywracamy punktor przez ::before i wymuszamy dziedziczenie kroju, rozmiaru oraz koloru z otoczenia. */ .blo-detail-text ul { margin: 0 0 26px; padding-left: 0; list-style: none !important; } .blo-detail-text ul > li { display: block !important; float: none !important; position: relative; margin: 0 0 10px; padding-left: 22px; border: 0; /* typografia jak w akapitach */ font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; font-style: inherit !important; letter-spacing: inherit !important; text-transform: none !important; line-height: 1.8; text-align: left !important; /* zdejmuje justowanie z inline style */ } .blo-detail-text ul > li::before { content: "\2013"; /* myślnik; kropka = "\2022" */ position: absolute; left: 0; top: 0; line-height: inherit; color: var(--tresc-kolor); } .blo-detail-text ul > li:last-child { margin-bottom: 0; } .blo-detail-text ul > li strong { font-weight: 700 !important; } /* Listy numerowane — klasycznie */ .blo-detail-text ol { margin: 0 0 26px; padding-left: 24px; list-style: decimal outside !important; } .blo-detail-text ol > li { display: list-item !important; float: none !important; margin: 0 0 10px; border: 0; font-family: inherit !important; font-size: inherit !important; line-height: 1.8; text-align: left !important; } /* Lista bezpośrednio pod nagłówkiem lub po zapowiadającym akapicie */ .blo-detail-text h2 + ul, .blo-detail-text h3 + ul, .blo-detail-text h2 + ol, .blo-detail-text h3 + ol { margin-top: 4px; } /* Listy zagnieżdżone */ .blo-detail-text ul ul { margin: 10px 0 4px; padding-left: 20px; } /* --- 5. TYTUŁ I OBRAZ WIODĄCY ----------------------------------- */ .blog_detail-inner-section .news-details h1 { line-height: 1.3; margin-bottom: 22px; } .blog_detail-inner-section .blog-detail-img { margin-bottom: 30px; } .blog_detail-inner-section .blog-detail-img img { max-width: 100%; height: auto; } .blo-detail-text img { max-width: 100%; height: auto; margin: 10px 0 28px; } /* --- 6. LINKI W TREŚCI ------------------------------------------ */ .blo-detail-text a { text-decoration: underline; text-underline-offset: 2px; } .blo-detail-text a:hover { text-decoration: none; } /* --- 7. ODSTĘP PRZED SEKCJĄ "Powiązane artykuły" ---------------- */ .blog_detail-inner-section .latest-posts { margin-top: 55px; } /* --- 8. MOBILE -------------------------------------------------- */ @media (max-width: 767.98px) { .blo-detail-text h2 { font-size: 20px; margin-top: 38px; } .blo-detail-text h3 { font-size: 17px; margin-top: 28px; } .blo-detail-text ul + h2, .blo-detail-text ol + h2 { margin-top: 42px; } .blo-detail-text ul > li { padding-left: 18px; } .blo-detail-text ol { padding-left: 20px; } /* justowanie na wąskim ekranie robi rzeki w tekście */ .blo-detail-text p { text-align: left !important; } } :root { --brand-accent: #509960; } .btn-primary, button[type="submit"], .categories-btn, .slider-caption .btn, .header-form button { background-color: #509960 !important; border-color: #509960 !important; } a:hover, .nav-link:hover, .cart-name:hover, .footer-links a:hover, .dropdown-toggler:hover, .product-info a:hover, .title h4 { color: #509960 !important; } .contact-icon i, .facility-inner .fb-icon i { color: #509960 !important; } .owl-nav .owl-prev:hover, .owl-nav .owl-next:hover, .carousel-indicators li.active { background-color: #509960 !important; border-color: #509960 !important; } /* === SLIDER: biały tekst z ciemną poświatą === */ .slider-area .slider-caption h1, .slider-area .slider-caption p { color: #ffffff !important; background: none !important; padding: 0; -webkit-text-stroke: 0; text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.8), 0 0 28px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 0, 0, 0.4); } /* Delikatniejsza poświata pod akapitem */ .slider-area .slider-caption p { text-shadow: 0 0 5px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 0, 0, 0.5); } /* === SLIDER: układ, odstępy, rozmiary === */ .slider-area .slider-caption h1, .slider-area .slider-caption p { display: block; float: none; clear: none; width: auto; max-width: 100%; } /* Nagłówek */ .slider-area .slider-caption h1 { margin: 0 0 15px 0; line-height: 1.2; } /* Podtytuł – większy niż domyślny */ .slider-area .slider-caption p { font-size: 24px; line-height: 1.45; margin: 0 0 15px 0; } /* Przycisk */ .slider-area .slider-caption .btn { display: inline-block; float: none; clear: none; margin-top: 0; } /* Mobile */ @media (max-width: 767px) { .slider-area .slider-caption h1 { margin-bottom: 16px; line-height: 1.25; } .slider-area .slider-caption p { font-size: 17px; margin-bottom: 22px; } } /* Wiersz w sekcji deals */ .deals-section .row:last-child { display: flex; flex-wrap: wrap; align-items: stretch; } /* Kolumna banera - punkt odniesienia */ .deals-section .col-lg-3, .deals-section .col-md-4, .deals-section .col-sm-5 { position: relative; } /* TYLKO baner boczny przy karuzeli */ .deals-section .sidebar-slider-fade-1 { position: absolute; inset: 0; padding: 0 15px; box-sizing: border-box; overflow: hidden; } .deals-section .sidebar-slider-fade-1 a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .deals-section .sidebar-slider-fade-1 img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 4px; } /* Mobile */ @media (max-width: 575px) { .deals-section .row:last-child { display: block; } .deals-section .col-sm-5 { position: static; } .deals-section .sidebar-slider-fade-1 { position: relative; inset: auto; height: auto; padding: 0; } .deals-section .sidebar-slider-fade-1 img { max-height: none; width: 100%; } } /* --- Podstrony produktowe: tabela parametrów widoczna od razu --- */ /* 1. Odsłonięcie kontenera z tabelą */ #ai, .tab-pane#ai, .collapse#ai { display: block !important; opacity: 1 !important; visibility: visible !important; height: auto !important; overflow: visible !important; } /* 2. Przycisk "Parametry" przestaje być klikalny, zostaje jako nagłówek sekcji */ a[href="#ai"], [data-toggle="tab"][href="#ai"], [data-bs-toggle="tab"][data-bs-target="#ai"] { pointer-events: none; cursor: default; } /* 3. Przycisk wygląda na stale aktywny (opcjonalnie) */ a[href="#ai"] { background: transparent; border-bottom: 2px solid #333; font-weight: 600; } /* --- Kontakt: zostaw tylko wiersz z adresem e-mail --- */ ul:has(> li a[href^="mailto:"]) > li:not(:has(a[href^="mailto:"])) { display: none !important; } /* ============================================================ DbajOgród.pl — opis kategorii (.custom-box__details) Typografia spójna z artykułami blogowymi ============================================================ */ .custom-box { margin-top: 40px; } .custom-box__details { font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 1.8; color: #3a3a3a; max-width: 100%; } /* --- Nagłówki --- */ .custom-box__details h2 { font-size: 26px; line-height: 1.35; font-weight: 600; color: #1c1c1c; margin: 46px 0 16px; } .custom-box__details h3 { font-size: 20px; line-height: 1.4; font-weight: 600; color: #1c1c1c; margin: 34px 0 12px; } .custom-box__details > *:first-child { margin-top: 0; } /* --- Akapity --- */ .custom-box__details p { margin: 0 0 20px; } /* --- Listy: przywrócenie punktorów --- */ .custom-box__details ul, .custom-box__details ol { margin: 0 0 24px; padding-left: 24px; list-style-position: outside; } .custom-box__details ul { list-style-type: disc !important; } .custom-box__details ol { list-style-type: decimal !important; } .custom-box__details li { display: list-item !important; margin-bottom: 10px; padding-left: 4px; line-height: 1.75; } .custom-box__details li::marker { color: #6b6b6b; } .custom-box__details li:last-child { margin-bottom: 0; } /* --- Tabela --- */ .custom-box__details table { width: 100%; border-collapse: collapse; margin: 26px 0 32px; font-size: 14px; line-height: 1.6; } .custom-box__details th, .custom-box__details td { border: 1px solid #e0e0e0; padding: 12px 14px; text-align: left; vertical-align: top; } /* Nagłówek tabeli — th siedzi tu w tbody, nie w thead */ .custom-box__details th { background: #f5f5f5; font-weight: 600; color: #1c1c1c; } .custom-box__details tbody tr:nth-child(even) { background: #fbfbfb; } /* --- Linki --- */ .custom-box__details a { color: #2b7a3d; text-decoration: underline; text-underline-offset: 2px; } .custom-box__details a:hover { color: #1f5c2d; } .custom-box__details strong { font-weight: 600; color: #1c1c1c; } /* ============================================================ Mobile ============================================================ */ @media (max-width: 767px) { .custom-box__details { font-size: 14px; } .custom-box__details h2 { font-size: 21px; margin: 34px 0 12px; } .custom-box__details h3 { font-size: 17px; margin: 26px 0 10px; } /* Tabela: przewijanie poziome zamiast rozjeżdżania layoutu */ .custom-box__details table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } } /* --- Listy: myślniki zamiast kropek --- */ .custom-box__details ul, .custom-box__details ol { margin: 0 0 24px; padding-left: 0; } .custom-box__details ul { list-style: none !important; } .custom-box__details ul > li { display: block !important; position: relative; padding-left: 22px; margin-bottom: 10px; line-height: 1.75; } .custom-box__details ul > li::before { content: "–"; position: absolute; left: 0; top: 0; color: #6b6b6b; font-weight: 400; } /* Listy numerowane zostają bez zmian */ .custom-box__details ol { padding-left: 24px; list-style-type: decimal !important; } .custom-box__details ol > li { display: list-item !important; margin-bottom: 10px; padding-left: 4px; line-height: 1.75; } .custom-box__details li:last-child { margin-bottom: 0; } /* Listy zagnieżdżone */ .custom-box__details ul ul { margin: 10px 0 0; } .custom-box__details ul ul > li::before { content: "·"; }