/* Theme Name: Kadence Child - Gabinet Dietetyczny Description: Motyw potomny Kadence dla strony gabinetu dietetycznego Karoliny Stanisławskiej. Wprowadza brandowa palete (petrol/zloto-oliwka) i typografie (Playfair Display + Mulish) zgodna z nowym logo. Author: local-wp project Template: kadence Version: 1.0.0 Text Domain: kadence-child */ /* Kolory marki sa ustawione natywnie przez opcje Kadence "Global Palette" (kadence_global_palette) - patrz DECISIONS.md. Dzieki temu te same kolory sa dostepne w Customizerze i w palecie kolorow edytora blokow, a Kadence samo generuje zmienne --global-palette1..15 w . Tutaj nadpisujemy tylko fonty (Kadence nie ma prostego mechanizmu CLI do tego, wiec robimy to przez CSS custom properties z !important, co gwarantuje pierwszenstwo niezaleznie od kolejnosci wczytywania styli). */ :root { --global-heading-font-family: 'Playfair Display', Georgia, serif !important; --global-body-font-family: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* Elegancki, kursywny akcent - do uzycia oszczednie (np. tagline w hero, cytat), nie do dlugich tresci. Nawiazuje do charakteru logo bez powielania go 1:1 w tekscie strony. */ .eyebrow-script { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; } /* Wyrozniony przycisk w menu glownym (np. "Jak przygotowac sie do wizyty") - dodaj klase "nav-cta" do wybranej pozycji menu w Wygladzie > Menu. */ .nav-cta > a { display: inline-block !important; background-color: var(--global-palette1) !important; color: var(--global-palette9) !important; border-radius: 999px !important; padding: 0.5em 1.25em !important; } .nav-cta > a:hover { background-color: var(--global-palette10) !important; color: var(--global-palette9) !important; } /* ========================================================================== Wzmocnienie designu - typografia, karty, tabele, FAQ, przyciski. Cel: odejsc od domyslnego, generycznego wygladu Kadence w strone spokojnej ale wyraznej identyfikacji spojnej z logo (petrol/oliwka). ========================================================================== */ /* Naglowki - wieksza pewnosc siebie, wiecej oddechu */ .entry-content h1, .wp-block-heading { letter-spacing: -0.01em; } .entry-content h2.wp-block-heading, .entry-content > h2 { margin-top: 2.75em; padding-bottom: 0.35em; border-bottom: 2px solid var(--global-palette7); position: relative; } .entry-content h2.wp-block-heading::before, .entry-content > h2::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 3.5em; height: 2px; background-color: var(--global-palette10); } .entry-content h3.wp-block-heading, .entry-content > h3 { margin-top: 1.75em; color: var(--global-palette2); } /* Przyciski - odrobine wiecej charakteru niz domyslne Kadence */ .wp-block-button__link { border-radius: 8px !important; padding: 0.85em 1.75em !important; font-weight: 600 !important; transition: transform 0.15s ease, box-shadow 0.15s ease; } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26, 87, 96, 0.25); } .wp-block-button.is-style-outline .wp-block-button__link { border-width: 2px !important; } /* Zdjecia w tresci - zaokraglenie + delikatny cien zamiast ostrych kraw ...*/ .entry-content .wp-block-image img { border-radius: 12px; box-shadow: 0 12px 32px rgba(31, 36, 33, 0.12); } /* Tabela cennika - czytelna, brandowa */ .entry-content .wp-block-table table { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--global-palette7); } .entry-content .wp-block-table thead th { background-color: var(--global-palette1); color: var(--global-palette9); font-family: var(--global-heading-font-family); font-weight: 600; padding: 0.9em 1.2em; } .entry-content .wp-block-table tbody td { padding: 0.85em 1.2em; border-top: 1px solid var(--global-palette7); } .entry-content .wp-block-table tbody tr:nth-child(even) { background-color: var(--global-palette8); } /* FAQ / akordeon (core/details) - wlasny styl zamiast domyslnego trojkata */ .entry-content .wp-block-details { background-color: var(--global-palette8); border: 1px solid var(--global-palette7); border-radius: 12px; padding: 1em 1.4em; margin-bottom: 0.9em; } .entry-content .wp-block-details summary { cursor: pointer; font-family: var(--global-heading-font-family); font-weight: 600; font-size: 1.05em; color: var(--global-palette3); list-style: none; display: flex; align-items: center; justify-content: space-between; } .entry-content .wp-block-details summary::-webkit-details-marker { display: none; } .entry-content .wp-block-details summary::after { content: "+"; font-family: var(--global-body-font-family); font-weight: 400; font-size: 1.4em; color: var(--global-palette10); margin-left: 1em; transition: transform 0.2s ease; } .entry-content .wp-block-details[open] summary::after { transform: rotate(45deg); } .entry-content .wp-block-details p:last-child { margin-bottom: 0; padding-top: 0.5em; } /* Karty (do sekcji na stronie glownej: "Jak moge Ci pomoc", "Z mojej kuchni" itp.) - dodaj klase "brand-card" do bloku Grupa. */ .brand-card { background-color: var(--global-palette8); border-radius: 16px; padding: 2em; height: 100%; box-sizing: border-box; } /* Kolumny (core/columns) domyslnie sa rowne wysokosci (flex), ale trzeba im na to jawnie pozwolic - Kadence czasem nadpisuje align-items. */ .wp-block-columns { align-items: stretch !important; } /* Kafelki Kadence "Info Box" w ukladzie Row Layout (np. "Jak moge Ci pomoc" na stronie glownej) - .kt-row-column-wrap to CSS Grid, ktory domyslnie rozciaga bezposrednie dzieci (.wp-block-kadence-column) do rownej wysokosci, ale sama "karta" (Info Box) jest kilka poziomow zagniezdzenia glebiej i nie dziedziczy tego automatycznie - trzeba przekazac wysokosc 100% w dol calym lancuchem. */ .wp-block-kadence-column { height: 100%; box-sizing: border-box; } .wp-block-kadence-column > .kt-inside-inner-col { height: 100%; display: flex; flex-direction: column; } .kt-inside-inner-col > .wp-block-kadence-infobox { flex: 1; display: flex; } .wp-block-kadence-infobox .kt-blocks-info-box-link-wrap { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; } .brand-card h2, .brand-card h3 { margin-top: 0 !important; border-bottom: none !important; } .brand-card h2::before, .brand-card h3::before { display: none; } /* Pelna sekcja w kolorze petrol (np. koncowe CTA) - dodaj klase "brand-band" do bloku Grupa. Tekst i linki w bialym kolorze. */ .brand-band { background-color: var(--global-palette1); color: var(--global-palette9); border-radius: 16px; padding: 3em 2.5em; } .brand-band h2, .brand-band h3, .brand-band h4, .brand-band p { color: var(--global-palette9) !important; } .brand-band h2::before, .brand-band h3::before { display: none; } .brand-band a:not(.wp-block-button__link) { color: var(--global-palette9); text-decoration: underline; } .brand-band .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: var(--global-palette9); color: var(--global-palette1) !important; } .brand-band .wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--global-palette9) !important; color: var(--global-palette9) !important; } /* Subtelny motyw jablka z dloni - mala dekoracja przed "eyebrow" nad H1 */ .eyebrow-script { display: flex; align-items: center; gap: 0.6em; color: var(--global-palette10); font-size: 1.15em; } .eyebrow-script::before { content: ""; display: inline-block; width: 1.6em; height: 1.6em; background: url("assets/icon-apple.png") no-repeat center / contain; } /* ========================================================================== Karta przepisu ("recipe-card") - wlasny, darmowy odpowiednik wygladu plaftnego szablonu z wtyczek do przepisow (bez zadnej wtyczki/premium). Uzycie: wstaw wzorzec blokow "Przepis - szablon" z inspektora blokow, albo recznie owin sekcje w Grupe z klasa "recipe-card". ========================================================================== */ .recipe-card { background-color: var(--global-palette9); border: 1px solid var(--global-palette3); border-radius: 10px; overflow: hidden; margin-bottom: 2em; } .recipe-meta { display: flex; flex-wrap: wrap; gap: 0.75em; padding: 1.5em 1.75em !important; border-bottom: 1px solid var(--global-palette7); } /* Plakietki czasu/porcji/trudnosci w rzedzie meta */ .recipe-meta p { display: inline-flex; align-items: baseline; gap: 0.4em; margin: 0; background-color: var(--global-palette8); color: var(--global-palette3); font-weight: 600; border-radius: 999px; padding: 0.5em 1.1em; } .recipe-meta p strong { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--global-palette10); font-weight: 700; } /* Sekcja poza ukladem kolumnowym (np. Wartosci odzywcze) - naglowek "przebija" na cala szerokosc karty. */ .recipe-section { padding: 0 1.75em 1.5em !important; } .recipe-section .recipe-section-title { margin: 0 -1.75em 1em; padding: 0.7em 1.75em; border-top: 1px solid var(--global-palette7); border-bottom: 1px solid var(--global-palette7); } .recipe-section-title { display: flex; align-items: center; gap: 0.5em; background-color: var(--global-palette8); font-family: var(--global-heading-font-family); font-weight: 600; font-size: 1.15em; color: var(--global-palette3); } .recipe-section-title .dashicons { color: var(--global-palette10); width: 1.1em; height: 1.1em; font-size: 1.1em; } .recipe-card ul, .recipe-card ol { margin: 0; padding-left: 1.3em; } .recipe-card li { margin-bottom: 0.5em; } .recipe-badge { display: inline-block; background-color: var(--global-palette10); color: var(--global-palette9); border-radius: 999px; padding: 0.3em 1em; font-size: 0.85em; font-weight: 600; } /* Plakietki wegańskie/bezglutenowe nad kartą przepisu (blok gd/recipe). */ .recipe-badges { display: flex; gap: 0.5em; flex-wrap: wrap; padding: 1.25em 1.75em; } /* Metadane (czas/porcje/trudnosc) w prawej kolumnie karty przepisu, obok skladnikow w lewej kolumnie - patrz blocks/recipe/render.php. */ .recipe-side-meta { display: flex; flex-direction: column; gap: 0.6em; } .recipe-side-meta p { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4em; margin: 0; width: 100%; max-width: 260px; box-sizing: border-box; background-color: var(--global-palette8); color: var(--global-palette3); font-weight: 600; border-radius: 999px; padding: 0.5em 1.1em; } .recipe-side-meta p strong { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.02em; color: var(--global-palette10); font-weight: 700; white-space: nowrap; } .recipe-side-meta p span { white-space: nowrap; } /* Przyciski "Drukuj"/"Pobierz PDF" pod karta przepisu (blok gd/recipe) - ukryte przy zwyklym drukowaniu calej strony (Ctrl+P), bo prowadza do widoku drukowania, ktory i tak sam otwiera okno drukowania/pobierania. */ .recipe-actions { display: flex; gap: 0.75em; flex-wrap: wrap; margin-top: 1em; } .recipe-actions .recipe-action-btn { flex: 0 0 auto; } @media print { .no-print { display: none !important; } } /* Listy w widgetach "Powiazane przepisy" / "Zobacz tez" (sidebar). */ .gd-related-list { list-style: none; margin: 0; padding: 0; } .gd-related-list li { margin-bottom: 0.6em; padding-bottom: 0.6em; border-bottom: 1px solid var(--global-palette7); } .gd-related-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Uklad 2-kolumnowy dla skladnikow/sposobu przygotowania wewnatrz karty - dodaj klase "recipe-columns" do bloku Kolumny (Columns) w edytorze. Naglowki sekcji w tym wariancie sa zamkniete w obrebie kolumny (zaokraglone pigulki), nie przebijaja na cala szerokosc karty - prosciej i stabilniej niz liczenie ujemnych marginesow w waskiej kolumnie. */ .recipe-columns { display: flex; flex-wrap: wrap; padding: 0 !important; margin: 0 !important; } .recipe-columns > .wp-block-column { flex: 1 1 260px; padding: 0 1.75em 1.5em !important; margin: 0 !important; } .recipe-columns > .wp-block-column:first-child { flex: 3 1 0; border-right: 1px solid var(--global-palette7); } .recipe-columns > .wp-block-column:last-child { flex: 2 1 0; } .recipe-columns .recipe-section { padding: 0 !important; } .recipe-columns .recipe-section-title { margin: 0 -1.75em 1em !important; padding: 0.5em 1.75em; border: none; border-top: 1px solid var(--global-palette7); border-bottom: 1px solid var(--global-palette7); font-size: 1.05em; display: flex; } /* Stopka: NAP (nazwa/adres/telefon) - patrz gd_footer_nap() w functions.php */ .gd-footer-nap { width: 100%; text-align: center; padding: 1em 1.5rem; font-size: 0.85em; opacity: 0.8; } .gd-footer-nap a { color: inherit; } /* Cennik na Usludze: na mobile tabela przewija sie w bok (overflow-x:auto z rdzenia WP), ale bez zadnej wskazowki widac, ze cos jest ucieciete po prawej - cien na krawedzi podpowiada, ze warto przewinac. */ @media (max-width: 600px) { .wp-block-table { position: relative; } .wp-block-table::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08)); pointer-events: none; } }