/* Theme Name: Kadence Child Template: kadence Version: 1.0.0 */ /* =========================================== SPIS TREŚCI 1. Zmienne kolorów i typografii 2. Style globalne 3. Ukrycie ocen gwiazdkowych 4. Logo SVG 5. Header (nawigacja górna) 6. Menu mobilne (drawer) 7. Przyciski — warianty 8. Sekcja Hero (slider główny) 9. Sekcja: Tagi kategorii 10. Sekcja: Karuzela marek 11. Sekcja: Wyróżniona kolekcja 12. Sekcja: Product Highlight 13. Sekcja: Eksploruj kategorie 14. Sekcja: Showcase (naprzemienne bloki) 15. Sekcja: Produkty WooCommerce (strona główna) 16. Sekcja: Promocje / USP 17. Sekcja: CTA / Newsletter 18. WooCommerce — karty produktów (listing) 19. WooCommerce — przycisk "Dodaj do koszyka" (karty) 20. WooCommerce — stany przycisku koszyka (loading/added) 21. WooCommerce — strona pojedynczego produktu 22. WooCommerce — kontrolka ilości (quantity) 23. WooCommerce — strona koszyka 24. WooCommerce — kasa (checkout) 25. WooCommerce — Moje konto 26. Cart drawer (wysuwany koszyk) 27. Search drawer (wysuwana wyszukiwarka) 28. Strona FAQ / Kontakt 29. Strona O marce 30. Stopka 31. Baner cookies (GDPR Cookie Compliance) 32. Responsive (breakpointy: 1024px / 768px / 480px) =========================================== */ /* =========================================== 1. ZMIENNE KOLORÓW I TYPOGRAFII Główna paleta — używaj tych zmiennych zamiast pisać wartości hex bezpośrednio. Zmiana koloru tutaj propaguje się na całą stronę. =========================================== */ :root { --accent: #666666; /* ciemna zieleń — główny kolor marki */ --accent-alt: #2e2e2e; /* głębsza zieleń — hover, header, footer */ --accent-complement: #a59e91; /* beż/taupe — akcenty, linie dekoracyjne */ --strongest-text: #1A1A1A; /* prawie czarny — nagłówki H1, H2 */ --strong-text: #2E2E2E; /* ciemny szary — H3-H6, tekst główny */ --medium-text: #5C5C5C; /* szary — opisy produktów, treści sekcji */ --subtle-text: #8A8477; /* jasny szary/beż — meta, breadcrumbs */ --subtle-bg: #a59e91; /* jasny beż — tła naprzemienne, obramowania */ --lighter-bg: #F5F0E8; /* bardzo jasny beż — tło globalne strony */ --white: #faf7f2; /* ciepła biel — tekst na ciemnym tle, logo */ --global-content-edge-padding: 0.5rem !important; } /* =========================================== 2. STYLE GLOBALNE =========================================== */ body { background-color: var(--lighter-bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } kb-row-layout-wrap.kb-row-layout-id38_ce790c-6b.alignnone.wp-block-kadence-rowlayout { background: #f21212 !important; } .entry-summary p { display: -webkit-box !important; -webkit-line-clamp: 5 !important; /* Tutaj określasz maksymalną liczbę linijek */ -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } woocommerce-terms-and-conditions-link { color: #202020 !important; } a.woocommerce-button.button.view { color: #ffffff !important; } a.woocommerce-button.button.cancel { color: #ffffff !important; } a.woocommerce-button.button.pay { color: #ffffff !important; } ul.woocommerce-error { color: #76736d !important; background: #76736d !important; } /* Nagłówki — wszystkie uppercase z letter-spacing */ h1, h2 { color: var(--strongest-text); letter-spacing: 4px; text-transform: uppercase; font-weight: 300; } h3, h4 { color: var(--strong-text); letter-spacing: 3px; text-transform: uppercase; font-weight: 500; } h5, h6 { color: var(--strong-text); letter-spacing: 2px; text-transform: uppercase; font-weight: 500; } p { line-height: 1.8; letter-spacing: 0.3px; } a { transition: color 0.3s ease; } /* Transition na obrazkach — zoom przy hover działa przez zmianę transform */ img { transition: transform 0.6s ease; } a.woocommerce-terms-and-conditions-link { color: black; } a.woocommerce-terms-and-conditions-link:hover { color: black; } a.woocommerce-terms-and-conditions-link:focus { color: black; } a.woocommerce-terms-and-conditions-link:active { color: black; } /* Zaznaczony tekst */ ::selection { background-color: var(--accent); color: var(--white); } /* Scrollbar — wąski, w kolorze marki */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--lighter-bg); } ::-webkit-scrollbar-thumb { background: var(--accent); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-alt); } /* Pozioma linia dekoracyjna (beżowa) — używana między sekcjami */ .gold-line, .gold-line hr { width: 60px !important; height: 1px !important; background-color: var(--accent-complement) !important; border: none !important; margin: 24px auto !important; } /* =========================================== 3. UKRYCIE OCEN GWIAZDKOWYCH WooCommerce i Kadence domyślnie wyświetlają gwiazdki przy produktach. Ta sekcja je ukrywa globalnie — jeśli chcesz je przywrócić, usuń lub zakomentuj poniższe reguły. =========================================== */ .star-rating, .wc-block-grid__product-rating, .woocommerce-product-rating, .kt-testimonial-rating-wrap, .kb-svg-icon-fas_star, .kt-svg-testimonial-rating-icon, .comment-form-rating, .woocommerce-review__rating, .wp-block-kadence-icon .kt-svg-icon-wrap.kb-svg-icon-fas_star { display: none !important; } /* =========================================== 4. LOGO SVG Logo jest wstawione jako inline SVG w header.php. Klasa .harkila-logo steruje rozmiarem i kolorem fill. Normalny rozmiar: 180px, po przyklejeniu headera: 140px. =========================================== */ .harkila-logo { width: 180px; height: auto; fill: var(--white) !important; transition: fill 0.3s ease, transform 0.3s ease; } .harkila-logo path { fill: inherit !important; } /* Hover — zmiana koloru fill na beż */ .brand:hover .harkila-logo, .custom-logo-link:hover .harkila-logo { fill: var(--accent-complement) !important; } /* Ukrycie domyślnego logo wstawianego przez WordPress/Kadence */ .custom-logo-link img, .brand img.custom-logo, .brand img.svg-logo-image { display: none !important; } /* Mniejsze logo po przyklejeniu headera (sticky) */ .item-is-fixed .harkila-logo { width: 140px; } /* Logo w mobilnym menu */ .mobile-site-branding .harkila-logo { width: 140px; height: auto; fill: var(--white) !important; } .mobile-site-branding .harkila-logo path { fill: inherit !important; } .mobile-site-branding a:hover .harkila-logo { fill: var(--accent-complement) !important; } .mobile-site-branding img.custom-logo, .mobile-site-branding img.svg-logo-image { display: none !important; } /* =========================================== 5. HEADER (NAWIGACJA GÓRNA) #masthead — główny wrapper headera Kadence. Tło: --accent-alt (ciemna zieleń). Tekst menu, ikony koszyka i wyszukiwarki: --white. =========================================== */ #masthead, #masthead .site-main-header-wrap { background-color: var(--accent-alt) !important; border-bottom: 1px solid rgba(250,247,242,0.08); } /* Linki menu głównego */ #masthead .header-menu-container a, #masthead .menu-item > a, #masthead .header-navigation a { color: var(--white) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 3px !important; text-transform: uppercase !important; transition: none !important; } #masthead .header-menu-container a:hover, #masthead .menu-item > a:hover, #masthead .current-menu-item > a, #masthead .current_page_item > a { color: var(--white) !important; } /* Strzałka rozwijająca podmenu */ #masthead .dropdown-nav-toggle svg, #masthead .kadence-arrow-down-svg { fill: var(--white) !important; } /* Podmenu (dropdown) */ #masthead .sub-menu { background-color: var(--accent-alt) !important; border: 1px solid rgba(250,247,242,0.08) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important; } #masthead .sub-menu a { color: rgba(250,247,242,0.7) !important; font-size: 11px !important; letter-spacing: 2px !important; } #masthead .sub-menu a:hover { color: var(--white) !important; } /* Ikona lupy (wyszukiwarka) */ #masthead .kadence-search-svg { fill: var(--white) !important; transition: transform 0.3s ease; } #masthead .search-toggle-open:hover .kadence-search-svg { fill: var(--white) !important; transform: scale(1.15); } /* Ikona koszyka */ #masthead .header-cart-wrap svg, #masthead .kadence-shopping-bag-svg { fill: var(--white) !important; transition: transform 0.3s ease; } #masthead .header-cart-button:hover svg, #masthead .header-cart-wrap:hover svg { fill: var(--white) !important; transform: scale(1.15); } /* Licznik produktów przy ikonie koszyka */ #masthead .header-cart-total { color: var(--white) !important; background-color: var(--accent-complement) !important; font-size: 9px !important; font-weight: 600 !important; width: 16px !important; height: 16px !important; line-height: 16px !important; text-align: center !important; border-radius: 50% !important; display: inline-block !important; position: relative; top: -8px; left: -6px; } /* Hamburger (mobile) */ #masthead .menu-toggle-open, #masthead .menu-toggle-open svg { color: var(--white) !important; fill: var(--white) !important; } #masthead .primary-menu-container .menu-item > a, #masthead .primary-menu-container .menu-item > a span.nav-drop-title-wrap, #masthead .nav-drop-title-wrap { color: var(--white) !important; } /* Przycisk konta (ikona osoby) — dodany ręcznie w header.php */ .harkila-account-wrap { display: flex !important; align-items: center !important; } .harkila-account-button { display: flex !important; align-items: center !important; padding: 0 8px !important; } .harkila-account-button svg { fill: var(--white) !important; width: 22px !important; height: 22px !important; transition: transform 0.3s ease !important; } .harkila-account-button:hover svg { fill: var(--accent-complement) !important; transform: scale(1.15) !important; } /* Tagline obok logo ("Autoryzowany Dealer...") */ .site-branding a.brand, .mobile-site-branding a.brand { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; } .harkila-logo-tagline { font-size: 8px !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--accent-complement) !important; font-weight: 400 !important; line-height: 1.4 !important; border-left: 1px solid rgba(250,247,242,0.2) !important; padding-left: 12px !important; width: 130px !important; word-break: break-word !important; white-space: normal !important; } /* =========================================== 6. MENU MOBILNE (DRAWER) .popup-drawer — kontener wysuwanego menu. Tło takie samo jak header (--accent-alt). =========================================== */ .popup-drawer .drawer-inner { background-color: var(--accent-alt) !important; } .popup-drawer .drawer-content a, .popup-drawer .mobile-menu-container a { color: var(--white) !important; letter-spacing: 2px !important; text-transform: uppercase !important; font-size: 12px !important; } .popup-drawer .drawer-content a:hover { color: var(--accent-complement) !important; } .popup-drawer .drawer-sub-toggle svg { fill: var(--white) !important; } .popup-drawer .toggle-close-bar { background-color: var(--white) !important; } /* =========================================== 7. PRZYCISKI — WARIANTY ZASADA: jeden styl bazowy, trzy konteksty wizualne. A) Ghost (ciemne tło) — półprzezroczyste, blur Klasy sekcji: .kb-row-layout-id38_e403bc-8a, .kb-row-layout-id38_110b73-21, .kb-row-layout-id38_365ba8-1e B) Pełny zielony (jasne tło) — solidny --accent Klasy sekcji: .kb-row-layout-id38_ebf2f5-99, .kb-row-layout-id38_a32e99-af, .kb-row-layout-id38_ce790c-6b, .kb-row-layout-id38_89f8c7-60 C) Showcase CTA — pełny zielony, bez blur Klasa: .hk-showcase-cta ABY DODAĆ NOWY PRZYCISK w nowej sekcji: 1. Sprawdź kolor tła sekcji. 2. Jasne tło → dodaj klasę sekcji do grupy B (pełny zielony). 3. Ciemne tło → dodaj klasę sekcji do grupy A (ghost). 4. Możesz też nadać własną klasę np. .moja-sekcja-cta i skopiować odpowiedni blok poniżej. =========================================== */ /* Styl bazowy przycisków Kadence — ghost z blur */ .kb-button.kt-button, .kb-button.kt-button.button, span.kb-button.wp-block-button__link, .wp-block-kadence-singlebtn { background: rgba(30,43,31,0.6) !important; border: 1px solid rgba(250,247,242,0.3) !important; color: var(--white) !important; padding: 16px 42px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 4px !important; text-transform: uppercase !important; border-radius: 0 !important; /* brak zaokrąglenia — design kanciasty */ transition: all 0.4s ease !important; box-shadow: none !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } .kb-button.kt-button:hover, span.kb-button.wp-block-button__link:hover, .wp-block-kadence-singlebtn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } /* Wariant B — pełny zielony (jasne tła sekcji) */ .kb-row-layout-id38_ebf2f5-99 .kb-button.kt-button, .kb-row-layout-id38_ebf2f5-99 span.kb-button.wp-block-button__link, .kb-row-layout-id38_a32e99-af .kb-button.kt-button, .kb-row-layout-id38_a32e99-af span.kb-button.wp-block-button__link, .kb-row-layout-id38_ce790c-6b .kb-button.kt-button, .kb-row-layout-id38_ce790c-6b span.kb-button.wp-block-button__link, .kb-row-layout-id38_89f8c7-60 .kb-button.kt-button, .kb-row-layout-id38_89f8c7-60 span.kb-button.wp-block-button__link { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .kb-row-layout-id38_ebf2f5-99 .kb-button.kt-button:hover, .kb-row-layout-id38_ebf2f5-99 span.kb-button.wp-block-button__link:hover, .kb-row-layout-id38_a32e99-af .kb-button.kt-button:hover, .kb-row-layout-id38_a32e99-af span.kb-button.wp-block-button__link:hover, .kb-row-layout-id38_ce790c-6b .kb-button.kt-button:hover, .kb-row-layout-id38_ce790c-6b span.kb-button.wp-block-button__link:hover, .kb-row-layout-id38_89f8c7-60 .kb-button.kt-button:hover, .kb-row-layout-id38_89f8c7-60 span.kb-button.wp-block-button__link:hover { background: var(--accent-alt) !important; border-color: var(--accent-alt) !important; color: var(--white) !important; } /* Wariant A — ghost z blur (ciemne tła sekcji) */ .kb-row-layout-id38_e403bc-8a .kb-button.kt-button, .kb-row-layout-id38_e403bc-8a span.kb-button.wp-block-button__link, .kb-row-layout-id38_e403bc-8a .wp-block-kadence-singlebtn, .kb-row-layout-id38_110b73-21 .kb-button.kt-button, .kb-row-layout-id38_110b73-21 span.kb-button.wp-block-button__link, .kb-row-layout-id38_365ba8-1e .kb-button.kt-button, .kb-row-layout-id38_365ba8-1e span.kb-button.wp-block-button__link, .kb-row-layout-id38_365ba8-1e .wp-block-kadence-singlebtn { background: rgba(30,43,31,0.6) !important; border: 1px solid rgba(250,247,242,0.3) !important; color: var(--white) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } .kb-row-layout-id38_e403bc-8a .kb-button.kt-button:hover, .kb-row-layout-id38_e403bc-8a span.kb-button.wp-block-button__link:hover, .kb-row-layout-id38_e403bc-8a .wp-block-kadence-singlebtn:hover, .kb-row-layout-id38_110b73-21 .kb-button.kt-button:hover, .kb-row-layout-id38_110b73-21 span.kb-button.wp-block-button__link:hover, .kb-row-layout-id38_365ba8-1e .kb-button.kt-button:hover, .kb-row-layout-id38_365ba8-1e span.kb-button.wp-block-button__link:hover, .kb-row-layout-id38_365ba8-1e .wp-block-kadence-singlebtn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } /* Wariant C — przycisk w sekcji Showcase */ .hk-showcase-cta .kb-button.kt-button, .hk-showcase-cta span.kb-button.wp-block-button__link { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .hk-showcase-cta .kb-button.kt-button:hover, .hk-showcase-cta span.kb-button.wp-block-button__link:hover { background: var(--accent-alt) !important; border-color: var(--accent-alt) !important; } /* =========================================== 8. SEKCJA HERO (SLIDER GŁÓWNY) .kb-row-layout-id38_e403bc-8a — ID bloku row w edytorze Kadence. Slider obsługuje Splide.js wbudowany w Kadence Blocks. Strzałki slidera ukryte na mobile (patrz sekcja 32). Swipe na mobile: pointer-events: none na warstwach nakładki — patrz koniec tego pliku. =========================================== */ .kb-row-layout-id38_e403bc-8a { min-height: 85vh !important; display: flex !important; align-items: center !important; background-color: var(--accent-alt) !important; } /* Główny nagłówek slajdu */ .kb-row-layout-id38_e403bc-8a h2.wp-block-kadence-advancedheading { color: var(--white) !important; font-weight: 600 !important; letter-spacing: 8px !important; line-height: 1.2 !important; text-shadow: 0 2px 30px rgba(0,0,0,0.2) !important; } /* Podtytuł slajdu */ .kb-row-layout-id38_e403bc-8a p.wp-block-kadence-advancedheading { color: rgba(250,247,242,0.6) !important; font-size: 13px !important; letter-spacing: 4px !important; text-transform: uppercase !important; font-weight: 400 !important; max-width: 500px !important; } /* Strzałki nawigacji slidera */ .kb-row-layout-id38_e403bc-8a .splide__arrow { background: transparent !important; border: 1px solid rgba(250,247,242,0.3) !important; opacity: 0.5 !important; transition: all 0.3s ease !important; } .kb-row-layout-id38_e403bc-8a .splide__arrow:hover { opacity: 1 !important; border-color: var(--accent-complement) !important; } .kb-row-layout-id38_e403bc-8a .splide__arrow svg { fill: var(--white) !important; } /* =========================================== 9. SEKCJA: TAGI KATEGORII Małe bloczki nawigacyjne — klikalne tagi prowadzące do kategorii produktów. =========================================== */ .kb-row-layout-id38_1e0980-a7 h6.has-theme-palette-9-color { color: var(--white) !important; background-color: var(--accent) !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-size: 11px !important; padding: 12px 24px !important; transition: all 0.3s ease; } /* Hover — zmiana na beż, ciemny tekst */ .kb-row-layout-id38_1e0980-a7 h6.has-theme-palette-9-color:hover { background-color: var(--accent-complement) !important; color: var(--accent-alt) !important; } /* =========================================== 10. SEKCJA: KARUZELA MAREK Zdjęcia logotypów — szare i półprzezroczyste, ożywają po najechaniu. =========================================== */ .kb-row-layout-id38_c70346-6e { background-color: var(--subtle-bg) !important; padding-top: 30px !important; padding-bottom: 30px !important; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); } .kb-row-layout-id38_c70346-6e .kb-gallery-figure img { opacity: 0.4 !important; filter: grayscale(100%) !important; transition: all 0.4s ease !important; } .kb-row-layout-id38_c70346-6e .kb-gallery-figure:hover img { opacity: 0.8 !important; filter: grayscale(0%) !important; } /* =========================================== 11. SEKCJA: WYRÓŻNIONA KOLEKCJA =========================================== */ .kb-row-layout-id38_ebf2f5-99 { background-color: var(--lighter-bg) !important; padding-top: 80px !important; padding-bottom: 80px !important; } .kb-row-layout-id38_ebf2f5-99 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > h2 { color: var(--strongest-text) !important; font-weight: 300 !important; letter-spacing: 5px !important; font-size: 28px !important; } /* Kolory Kadence palette → zmienne własne */ .kb-row-layout-id38_ebf2f5-99 .has-theme-palette-5-color { color: var(--subtle-text) !important; } .kb-row-layout-id38_ebf2f5-99 .has-theme-palette-3-color { color: var(--strongest-text) !important; } .kb-row-layout-id38_ebf2f5-99 .has-theme-palette-6-color { color: var(--accent) !important; font-weight: 600 !important; } .kb-row-layout-id38_ebf2f5-99 .kt-testimonial-title { color: var(--strongest-text) !important; } .kb-row-layout-id38_ebf2f5-99 .kt-testimonial-name { color: var(--accent) !important; font-weight: 700 !important; } .kb-row-layout-id38_ebf2f5-99 .rotate-text.has-theme-palette-1-color { color: var(--accent-complement) !important; font-weight: 300 !important; letter-spacing: 4px !important; } .kb-row-layout-id38_ebf2f5-99 .kt-testimonial-content { color: var(--medium-text) !important; font-style: normal !important; line-height: 1.8 !important; } /* =========================================== 12. SEKCJA: PRODUCT HIGHLIGHT =========================================== */ .kb-row-layout-id38_89f8c7-60 { background-color: var(--white) !important; padding-top: 60px !important; padding-bottom: 60px !important; } .kb-row-layout-id38_89f8c7-60 .has-theme-palette-3-color { color: var(--strongest-text) !important; } .kb-row-layout-id38_89f8c7-60 .has-theme-palette-5-color { color: var(--medium-text) !important; } .kb-row-layout-id38_89f8c7-60 .has-theme-palette-6-color { color: var(--accent) !important; } .kb-row-layout-id38_89f8c7-60 .has-theme-palette-1-color { color: var(--accent-complement) !important; } /* =========================================== 13. SEKCJA: EKSPLORUJ KATEGORIE Dwa poziomy kart: - .kb-row-layout-id38_110b73-21 — outer wrapper (ciemne tło) - .kb-row-layout-id38_665486-be — karty z pełnoekranowym zdjęciem =========================================== */ .kb-row-layout-id38_110b73-21 { background-color: var(--accent-alt) !important; padding-top: 100px !important; padding-bottom: 100px !important; } .kb-row-layout-id38_110b73-21 .kt-row-layout-overlay { background: linear-gradient(180deg, var(--accent-alt) 0%, rgba(44,62,45,0.95) 100%) !important; } .kb-row-layout-id38_110b73-21 h6.has-theme-palette-1-color { color: var(--accent-complement) !important; font-size: 11px !important; letter-spacing: 4px !important; font-weight: 500 !important; } .kb-row-layout-id38_110b73-21 h2 { color: var(--white) !important; font-weight: 300 !important; letter-spacing: 5px !important; font-size: 28px !important; } .kb-row-layout-id38_110b73-21 .has-theme-palette-5-color { color: rgba(250,247,242,0.55) !important; } .kb-row-layout-id38_110b73-21 .wp-block-image { overflow: hidden !important; } .kb-row-layout-id38_110b73-21 .wp-block-image img { transition: transform 0.8s ease !important; filter: brightness(0.85) !important; } .kb-row-layout-id38_110b73-21 .wp-block-image:hover img { transform: scale(1.05) !important; } .kb-row-layout-id38_110b73-21 h3.has-theme-palette-9-color { color: var(--white) !important; background-color: transparent !important; font-weight: 600 !important; letter-spacing: 3px !important; font-size: 16px !important; } .kb-row-layout-id38_110b73-21 h6.has-theme-palette-6-color { color: var(--accent-complement) !important; background-color: transparent !important; font-size: 10px !important; letter-spacing: 3px !important; } /* Karty kategorii — zdjęcie jako pełne tło kolumny */ .kb-row-layout-id38_665486-be figure.wp-block-image { position: absolute !important; inset: 0 !important; margin: 0 !important; height: 100% !important; width: 100% !important; z-index: 0 !important; } .kb-row-layout-id38_665486-be figure.wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; filter: none !important; display: block !important; } .kb-row-layout-id38_665486-be .wp-block-kadence-column { position: relative !important; overflow: hidden !important; min-height: 350px !important; } /* Zawartość tekstowa karty — z-index powyżej zdjęcia */ .kb-row-layout-id38_665486-be .kt-inside-inner-col { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; height: 100% !important; min-height: 350px !important; padding: 24px !important; } /* Gradient przyciemniający od dołu */ .kb-row-layout-id38_665486-be .kt-inside-inner-col::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.1) 100%) !important; z-index: 1 !important; } .kb-row-layout-id38_665486-be .kt-inside-inner-col > * { position: relative !important; z-index: 2 !important; } .kb-row-layout-id38_665486-be h3, .kb-row-layout-id38_665486-be h6 { color: var(--white) !important; background: transparent !important; } /* =========================================== 14. SEKCJA: SHOWCASE (NAPRZEMIENNE BLOKI) Naprzemienne bloki zdjęcie + tekst. Klasy pomocnicze dodane przez PHP/HTML: .hk-showcase-row — wrapper bloku .hk-showcase-row--reverse — odwrócona kolejność (tekst po lewej) .hk-showcase-image — kolumna ze zdjęciem .hk-showcase-img — wrapper img z efektem parallax .hk-showcase-content — kolumna z tekstem .hk-showcase-label — mała etykieta nad tytułem .hk-showcase-title — główny tytuł bloku .hk-showcase-desc — opis .hk-showcase-cta — wrapper przycisku (patrz sekcja 7) Animacja scroll (parallax + fade-up) działa tylko w przeglądarkach z obsługą animation-timeline: view(). =========================================== */ .hk-showcase-row { background-color: var(--lighter-bg) !important; overflow: hidden; } .hk-showcase-image { overflow: hidden !important; position: relative; padding: 0 !important; } /* Delikatne wygaszanie krawędzi zdjęcia (w kierunku treści) */ .hk-showcase-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent 75%, rgba(245,240,232,0.4) 100%); pointer-events: none; z-index: 1; } .hk-showcase-row--reverse .hk-showcase-image::after { background: linear-gradient(to left, transparent 75%, rgba(245,240,232,0.4) 100%); } .hk-showcase-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 6s cubic-bezier(0.25,0,0.15,1) !important; } .hk-showcase-row:hover .hk-showcase-img img { transform: scale(1.05) !important; } .hk-showcase-content { display: flex !important; flex-direction: column !important; justify-content: center !important; } /* Etykieta (np. "Kolekcja 2025") */ .hk-showcase-label, .hk-showcase-label.wp-block-kadence-advancedheading { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--accent-complement) !important; margin-bottom: 16px !important; } /* Tytuł bloku — z animowaną linią pod spodem */ .hk-showcase-title, .hk-showcase-title.wp-block-kadence-advancedheading { font-weight: 300 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: var(--strongest-text) !important; font-size: clamp(22px,3.5vw,32px) !important; line-height: 1.2 !important; margin-bottom: 24px !important; } /* Linia dekoracyjna pod tytułem — wydłuża się przy hover na całej sekcji */ .hk-showcase-title::after { content: ''; display: block; width: 60px; height: 1px; background-color: var(--accent-complement); margin-top: 24px; transition: width 0.6s ease; } .hk-showcase-row:hover .hk-showcase-title::after { width: 100px; } .hk-showcase-desc, .hk-showcase-desc.wp-block-kadence-advancedheading { font-size: 14px !important; line-height: 1.85 !important; color: var(--medium-text) !important; max-width: 420px; letter-spacing: 0.3px !important; margin-bottom: 40px !important; } /* Animacje scroll — Progressive Enhancement Działa w Chrome 115+, Safari 17+, Firefox 110+. W starszych przeglądarkach elementy po prostu się nie animują. */ @supports (animation-timeline: view()) { .hk-showcase-content { animation: hkShowcaseFadeUp linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; } @keyframes hkShowcaseFadeUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .hk-showcase-img img { animation: hkShowcaseParallax linear both !important; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes hkShowcaseParallax { from { transform: scale(1.08) translateY(-4%); } to { transform: scale(1.08) translateY(4%); } } } /* =========================================== 15. SEKCJA: PRODUKTY WOOCOMMERCE (STRONA GŁÓWNA) =========================================== */ .kb-row-layout-id38_ce790c-6b { background-color: var(--lighter-bg) !important; padding-top: 80px !important; padding-bottom: 80px !important; } .kb-row-layout-id38_ce790c-6b > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > h2 { color: var(--strongest-text) !important; font-weight: 300 !important; letter-spacing: 5px !important; font-size: 28px !important; } .kb-row-layout-id38_ce790c-6b .has-theme-palette-5-color { color: var(--subtle-text) !important; } /* =========================================== 16. SEKCJA: PROMOCJE / USP Bloki z ikonami (Kadence Info Box). Klasa .kt-info-svg-icon — ikona SVG z Kadence. Klasa .kt-blocks-info-box-title — tytuł boxu. Klasa .kt-blocks-info-box-text — opis boxu. =========================================== */ .kb-row-layout-id38_a32e99-af { background-color: var(--subtle-bg) !important; padding-top: 60px !important; padding-bottom: 60px !important; } .kb-row-layout-id38_a32e99-af .has-theme-palette-1-color { color: var(--accent) !important; } .kb-row-layout-id38_a32e99-af .has-theme-palette-3-color { color: var(--strongest-text) !important; } .kb-row-layout-id38_a32e99-af .has-theme-palette-5-color { color: var(--medium-text) !important; } .kb-row-layout-id38_a32e99-af .kt-info-svg-icon svg { fill: var(--accent) !important; } .kb-row-layout-id38_a32e99-af .kt-blocks-info-box-title { color: var(--strongest-text) !important; font-size: 13px !important; letter-spacing: 2px !important; text-transform: uppercase !important; font-weight: 600 !important; } .kb-row-layout-id38_a32e99-af { color: var(--subtle-text) !important; font-size: 14px !important; line-height: 1.7 !important; } .kt-blocks-info-box-text { color: black !important; } .kb-row-layout-id38_a32e99-af .kt-blocks-info-box-link-wrap { border-bottom: 1px solid rgba(0,0,0,0.05) !important; padding-bottom: 20px !important; } /* =========================================== 17. SEKCJA: CTA / NEWSLETTER =========================================== */ .kb-row-layout-id38_365ba8-1e { background-color: var(--accent-alt) !important; padding-top: 100px !important; padding-bottom: 100px !important; } .kb-row-layout-id38_365ba8-1e .kt-row-layout-overlay { background-color: rgba(30,43,31,0.85) !important; } .kb-row-layout-id38_365ba8-1e h2 { color: var(--white) !important; font-weight: 300 !important; letter-spacing: 6px !important; font-size: 26px !important; line-height: 1.5 !important; } .kb-row-layout-id38_365ba8-1e h5 { color: var(--accent-complement) !important; font-weight: 400 !important; letter-spacing: 4px !important; font-size: 11px !important; } /* =========================================== 18. WOOCOMMERCE — KARTY PRODUKTÓW (LISTING) .wc-block-grid__product — karta w bloku WC Blocks .woocommerce ul.products li.product — karta w shortcode WC Hover: lekki cień + przesunięcie w górę. Zdjęcie: zoom 1.05 przy hover. =========================================== */ .wc-block-grid__product, .woocommerce ul.products li.product { background-color: var(--white) !important; border: none !important; box-shadow: none !important; transition: all 0.5s ease !important; overflow: hidden; } .wc-block-grid__product:hover, .woocommerce ul.products li.product:hover { box-shadow: 0 15px 50px rgba(30,43,31,0.1) !important; transform: translateY(-4px); } /* Wyłączenie Kadence "action on hover" — przyciski zawsze widoczne */ .woo-archive-action-on-hover .product-details .product-action-wrap, .woo-archive-action-on-hover .product-details .wc-block-grid__product-add-to-cart { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } .woocommerce ul.products li.product .entry-content-wrap { margin: 0.2em !important; } /* Wrapper zdjęcia — clip do overflow */ .wc-block-grid__product .woocommerce-loop-product__link, .woocommerce ul.products li.product .woocommerce-loop-image-link { overflow: hidden !important; display: block !important; } /* Zoom zdjęcia przy hover na karcie */ .wc-block-grid__product .woocommerce-loop-product__link img, .woocommerce ul.products li.product .woocommerce-loop-image-link img { transition: transform 0.8s ease !important; } .wc-block-grid__product:hover .woocommerce-loop-product__link img, .woocommerce ul.products li.product:hover .woocommerce-loop-image-link img { transform: scale(1.05) !important; } /* Dolna część karty — nazwa, cena, przycisk */ .wc-block-grid__product .product-details.entry-content-wrap, .woocommerce ul.products li.product .product-details.entry-content-wrap { background-color: var(--white) !important; padding: 16px 16px 16px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } /* Nazwa produktu na karcie */ .wc-block-grid__product .wc-block-grid__product-title, .woocommerce ul.products li.product h2.woocommerce-loop-product__title { color: var(--strongest-text) !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; font-size: 9px !important; line-height: 1.5 !important; margin: 0 !important; padding: 0 !important; } .wc-block-grid__product .wc-block-grid__product-title-link, .woocommerce ul.products li.product h2.woocommerce-loop-product__title a { text-decoration: none !important; color: inherit !important; } /* Ukrycie krótkiego opisu na kartach */ .woocommerce ul.products li.product .product-excerpt { display: none !important; } /* Cena — zielona */ .wc-block-grid__product .wc-block-grid__product-price, .wc-block-grid__product .wc-block-grid__product-price .woocommerce-Price-amount, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price .woocommerce-Price-amount { color: var(--accent) !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: 1px !important; margin: 0 !important; padding: 0 !important; } /* Przekreślona cena (przed rabatem) */ .wc-block-grid__product-price del, .woocommerce ul.products li.product .price del { color: var(--subtle-text) !important; font-weight: 400 !important; font-size: 12px !important; opacity: 0.6; } /* Cena po rabacie */ .wc-block-grid__product-price ins, .woocommerce ul.products li.product .price ins { color: var(--accent) !important; font-weight: 700 !important; text-decoration: none !important; } /* Badge "WYPRZEDAŻ" */ .woocommerce span.onsale { background-color: var(--accent-complement) !important; color: var(--accent-alt) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 6px 14px !important; line-height: 1 !important; min-height: auto !important; min-width: auto !important; } /* Badge wyprzedaż — wariant blokowy (WC Blocks) */ .wc-block-grid__product-onsale { background-color: var(--accent-complement) !important; color: var(--accent-alt) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 6px 14px !important; } /* =========================================== 19. WOOCOMMERCE — PRZYCISK "DODAJ DO KOSZYKA" (KARTY) .add_to_cart_button — klasa WooCommerce na przycisk w listingu. Styl: obramowanie w kolorze --accent, transparentne tło. Hover: wypełnienie na --accent. Ikony Kadence (koszyk, spinner, check) są ukryte — wyświetlamy tylko tekst przycisku. =========================================== */ .wc-block-grid__product-add-to-cart, .product-action-wrap { margin: 4px 0 0 0 !important; padding: 0 !important; } /* Sam przycisk */ .wc-block-grid__product-add-to-cart .add_to_cart_button, .product-action-wrap .add_to_cart_button { background: transparent !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; padding: 8px 8px !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; width: auto !important; transition: background 0.4s ease, color 0.4s ease !important; cursor: pointer !important; white-space: nowrap !important; } .wc-block-grid__product-add-to-cart .add_to_cart_button:hover, .product-action-wrap .add_to_cart_button:hover { background: var(--accent) !important; color: var(--white) !important; } /* Ukrycie ikon Kadence w przyciskach kart */ .add_to_cart_button .kadence-svg-iconset { display: none !important; } .add_to_cart_button .kadence-spinner-svg { display: none !important; } .add_to_cart_button .kadence-check-svg { display: none !important; } /* Ukrycie linku "Zobacz koszyk" po dodaniu produktu */ .added_to_cart { display: none !important; } /* =========================================== 20. WOOCOMMERCE — STANY PRZYCISKU KOSZYKA Stany dodawane przez JavaScript (harkila-cart.js): .hk-loading — ładowanie (animacja pulsowania tekstu) .hk-added — produkt dodany (zatrzymane, zielone) UWAGA: .hk-btn-text to wewnątrz przycisku — musi istnieć w HTML generowanym przez JS. =========================================== */ /* Stan: ładowanie */ .add_to_cart_button.hk-loading { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; pointer-events: none !important; } .add_to_cart_button.hk-loading .hk-btn-text { font-size: 14px !important; letter-spacing: 4px !important; animation: hkPulse 1s ease-in-out infinite !important; } @keyframes hkPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* Stan: dodano do koszyka */ .add_to_cart_button.hk-added { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; pointer-events: none !important; } .add_to_cart_button.hk-added .hk-btn-text { font-size: 9px !important; letter-spacing: 2px !important; } /* =========================================== 21. WOOCOMMERCE — STRONA PRODUKTU Layout: siatka 2 kolumny (zdjęcie | info). Na tablet i mobile spada do 1 kolumny (sekcja 32). Ważne klasy: .woocommerce-product-gallery — lewa kolumna, zdjęcia .summary — prawa kolumna, opis/cena/koszyk .woocommerce-tabs — zakładki (opis/dodatkowe info) .related.products — produkty powiązane .harkila-product-form — własny formularz wariantów .harkila-swatch-btn — przyciski rozmiarów/kolorów =========================================== */ /* Grid 2-kolumnowy */ .single-product div.product { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 60px !important; padding-top: 60px !important; padding-bottom: 80px !important; } .single-product div.product .woocommerce-product-gallery { grid-column: 1 !important; grid-row: 1 !important; } .single-product div.product .summary { grid-column: 2 !important; grid-row: 1 !important; } /* Galeria zdjęć */ .single-product .woocommerce-product-gallery { position: relative !important; overflow: hidden !important; } .single-product .woocommerce-product-gallery__image { width: 100%; overflow: hidden !important; } .single-product .woocommerce-product-gallery__image a { display: block !important; width: 100% !important; cursor: default !important; } /* Główne zdjęcie produktu */ .single-product .woocommerce-product-gallery__image img.wp-post-image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; display: block !important; } /* Ukrycie natywnego zooma WooCommerce */ .single-product img.zoomImg { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Przycisk "powiększ" */ .single-product .woocommerce-product-gallery__trigger { position: absolute !important; top: 16px !important; right: 16px !important; z-index: 10 !important; background: rgba(250,247,242,0.9) !important; border-radius: 50% !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Miniatury galerii */ .single-product .flex-control-thumbs { display: flex !important; gap: 8px !important; margin-top: 12px !important; padding: 0 !important; list-style: none !important; } .single-product .flex-control-thumbs li { /* flex: 0 0 calc(25% - 6px) !important; */ margin: 0 !important; } .single-product .flex-control-thumbs img { width: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; cursor: pointer !important; opacity: 0.6 !important; transition: opacity 0.3s ease !important; border: 1px solid transparent !important; } /* Aktywna/hovered miniatura */ .single-product .flex-control-thumbs img.flex-active, .single-product .flex-control-thumbs img:hover { opacity: 1 !important; border-color: var(--accent) !important; } /* Breadcrumbs */ .single-product .woocommerce-breadcrumb { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--subtle-text) !important; margin-bottom: 16px !important; } .single-product .woocommerce-breadcrumb a { color: var(--subtle-text) !important; } .single-product .woocommerce-breadcrumb a:hover { color: var(--accent) !important; } /* Tytuł produktu */ .single-product h1.product_title { font-size: clamp(20px,3vw,28px) !important; font-weight: 300 !important; letter-spacing: 4px !important; color: var(--strongest-text) !important; margin-bottom: 16px !important; line-height: 1.3 !important; } /* Cena */ .single-product .summary .price { font-size: 20px !important; font-weight: 500 !important; color: var(--accent) !important; letter-spacing: 2px !important; margin-bottom: 24px !important; display: block !important; } .single-product .summary .price del { color: var(--subtle-text) !important; font-size: 15px !important; margin-right: 8px !important; } .single-product .summary .price ins { text-decoration: none !important; color: var(--accent) !important; } /* Krótki opis (wyświetlany nad formularzem) */ .single-product .summary .short-description { border-top: 1px solid var(--subtle-bg) !important; border-bottom: 1px solid var(--subtle-bg) !important; padding: 20px 0 !important; margin-bottom: 28px !important; color: var(--medium-text) !important; font-size: 13px !important; line-height: 1.85 !important; } /* Ukrycie domyślnej tabeli wariantów WooCommerce — zastąpiona własnym formularzem (.harkila-product-form) */ .single-product table.variations { display: none !important; } /* Własny formularz wariantów */ .harkila-product-form { width: 100% !important; display: block !important; } .harkila-select-section { display: block !important; margin-bottom: 20px !important; } .harkila-variant-row { display: block !important; margin-bottom: 16px !important; } /* Etykieta atrybutu (np. "ROZMIAR", "KOLOR") */ .harkila-variant-label { display: block !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--strong-text) !important; margin-bottom: 12px !important; } /* Ukrycie linku "Wyczyść" i komunikatu dostępności */ .single-product .reset_variations, .harkila-select-section .reset_variations, .single-product .woocommerce-variation-availability { display: none !important; } /* SWATCHE — wariant tekstowy (rozmiary: XS, S, M...) Kliknięcie nadaje klasę .active */ .harkila-swatch-wrap { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .harkila-swatch-btn.harkila-swatch-text { background: transparent !important; border: 1px solid var(--subtle-bg) !important; padding: 8px 16px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--medium-text) !important; cursor: pointer !important; transition: all 0.2s ease !important; min-width: 48px !important; text-align: center !important; } .harkila-swatch-btn.harkila-swatch-text:hover { border-color: var(--accent) !important; color: var(--accent) !important; } .harkila-swatch-btn.harkila-swatch-text.active { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } /* SWATCHE — wariant obrazkowy (kolory/wzory) background-image ustawiany inline przez JS */ .harkila-swatch-btn.harkila-swatch-img { width: 56px !important; height: 56px !important; border: 2px solid transparent !important; background-size: cover !important; background-position: center !important; background-color: var(--subtle-bg) !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; outline: none !important; position: relative !important; } .harkila-swatch-btn.harkila-swatch-img:hover { border-color: var(--accent-complement) !important; } .harkila-swatch-btn.harkila-swatch-img.active { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; } /* Tooltip z nazwą koloru (atrybut title) */ .harkila-swatch-btn.harkila-swatch-img::after { content: attr(title) !important; position: absolute !important; bottom: calc(100% + 6px) !important; left: 50% !important; transform: translateX(-50%) !important; background: var(--strongest-text) !important; color: var(--white) !important; font-size: 9px !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 4px 8px !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s ease !important; } .harkila-swatch-btn.harkila-swatch-img:hover::after { opacity: 1 !important; } /* Przycisk "Dodaj do koszyka" — strona produktu (warianty) Pełna szerokość, wysoki (52px), ciemnozielony */ .single-product .single_variation_wrap { display: block !important; width: 100% !important; } .single-product .woocommerce-variation.single-variation { display: none !important; } .single-product .woocommerce-variation-add-to-cart { display: flex !important; flex-direction: row !important; align-items: stretch !important; width: 100% !important; border: none !important; margin: 0 !important; padding: 0 !important; gap: 12px !important; } .single-product .single_add_to_cart_button { flex: 1 !important; background: var(--accent) !important; color: var(--white) !important; border: none !important; border-radius: 0 !important; padding: 0 32px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; cursor: pointer !important; transition: background 0.4s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; white-space: nowrap !important; margin: 0 !important; } .single-product .single_add_to_cart_button:hover { background: var(--accent-alt) !important; } /* Przycisk wyłączony — kiedy nie wybrano wariantu */ .single-product .single_add_to_cart_button.disabled, .single-product .single_add_to_cart_button:disabled, .single-product .single_add_to_cart_button.wc-variation-selection-needed { background: var(--accent) !important; opacity: 0.45 !important; cursor: not-allowed !important; } /* Przycisk "Dodaj do koszyka" — produkty proste (bez wariantów) Formularz .cart zawiera: kontrolkę ilości + przycisk */ .single-product .cart { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; } .single-product .cart .quantity { display: flex !important; flex-direction: row !important; align-items: center !important; border: 1px solid var(--subtle-bg) !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; } /* Meta (SKU, kategoria, tagi) */ .single-product .product_meta { border-top: 1px solid var(--subtle-bg) !important; padding-top: 20px !important; margin-top: 20px !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--subtle-text) !important; } .single-product .product_meta a { color: var(--accent) !important; } .single-product .product_meta a:hover { color: var(--accent-alt) !important; } .single-product .product_meta span { display: block !important; margin-bottom: 6px !important; } /* Zakładki (opis / atrybuty / recenzje) */ .single-product .woocommerce-tabs { grid-column: 1 / -1 !important; margin-top: 60px !important; border-top: 1px solid var(--subtle-bg) !important; } .single-product .woocommerce-tabs ul.tabs { display: flex !important; gap: 0 !important; padding: 0 !important; margin: 0 0 40px 0 !important; border-bottom: 1px solid var(--subtle-bg) !important; list-style: none !important; } .single-product .woocommerce-tabs ul.tabs li { margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; } .single-product .woocommerce-tabs ul.tabs li a { display: block !important; padding: 16px 28px !important; font-size: 11px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--subtle-text) !important; border-bottom: 2px solid transparent !important; transition: all 0.3s ease !important; margin-bottom: -1px !important; } /* Aktywna zakładka — zielona linia pod spodem */ .single-product .woocommerce-tabs ul.tabs li.active a, .single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--accent) !important; border-bottom-color: var(--accent) !important; } .single-product .woocommerce-tabs .panel { color: var(--medium-text) !important; font-size: 14px !important; line-height: 1.85 !important; max-width: 760px !important; } /* Produkty powiązane */ .single-product .related.products { grid-column: 1 / -1 !important; border-top: 1px solid var(--subtle-bg) !important; padding-top: 60px !important; } .single-product .related.products h2 { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: var(--strongest-text) !important; margin-bottom: 32px !important; } /* =========================================== 22. WOOCOMMERCE — KONTROLKA ILOŚCI (QUANTITY) Używana w trzech miejscach: a) strona produktu (proste) b) strona produktu (warianty) c) koszyk (strona) Własne przyciski +/- dodane przez JS (harkila-qty.js): .harkila-qty-btn — wrapper przycisku .harkila-qty-minus — przycisk "−" .harkila-qty-plus — przycisk "+" Input qty ma ukryte natywne strzałki przeglądarki. =========================================== */ /* Wrapper quantity — flex row */ .harkila-quantity-wrap, .single-product .cart .quantity, .single-product .woocommerce-variation-add-to-cart .quantity { display: flex !important; flex-direction: row !important; align-items: center !important; border: 1px solid var(--subtle-bg) !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; } /* Przyciski +/- */ .harkila-qty-btn { background: transparent !important; border: none !important; width: 44px !important; height: 52px !important; font-size: 20px !important; color: var(--medium-text) !important; cursor: pointer !important; transition: all 0.3s ease !important; display: Flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 1 !important; flex-shrink: 0 !important; } .harkila-qty-btn:hover { background: var(--subtle-bg) !important; color: var(--accent) !important; } /* Separatory między przyciskami a inputem */ .harkila-qty-btn.harkila-qty-minus { border-right: 1px solid var(--subtle-bg) !important; } .harkila-qty-btn.harkila-qty-plus { border-left: 1px solid var(--subtle-bg) !important; } /* Input — ukrycie strzałek przeglądarki */ .single-product .quantity input.qty, .woocommerce-cart td.product-quantity .quantity input.qty { width: 52px !important; height: 52px !important; text-align: center !important; border: none !important; background: transparent !important; font-size: 15px !important; color: var(--strong-text) !important; padding: 0 !important; box-shadow: none !important; outline: none !important; -moz-appearance: textfield !important; } .single-product .quantity input.qty::-webkit-inner-spin-button, .single-product .quantity input.qty::-webkit-outer-spin-button, .woocommerce-cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button, .woocommerce-cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none !important; } /* =========================================== 23. WOOCOMMERCE — STRONA KOSZYKA =========================================== */ .woocommerce-cart .content-bg, .woocommerce-cart .site-main, .woocommerce-cart #primary { background: var(--subtle-bg) !important; } /* Biały kontener tabeli koszyka */ .woocommerce-cart .woocommerce { background: var(--white) !important; padding: 40px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; } /* Nagłówki kolumn tabeli */ .woocommerce-cart table.cart thead th { color: var(--subtle-text) !important; font-size: 11px !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-weight: 500 !important; border-bottom: 1px solid var(--subtle-bg) !important; padding-bottom: 16px !important; } /* Wiersze tabeli */ .woocommerce-cart table.cart td { border-bottom: 1px solid var(--subtle-bg) !important; padding: 20px 8px !important; color: var(--strong-text) !important; vertical-align: middle !important; } .woocommerce-cart table.cart td.product-name a { color: var(--strong-text) !important; font-size: 13px !important; letter-spacing: 1px !important; } .woocommerce-cart table.cart td.product-name a:hover { color: var(--accent) !important; } .woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart td.product-subtotal { color: var(--strong-text) !important; font-size: 14px !important; } /* Przycisk "X" usuwania produktu */ .woocommerce-cart table.cart td.product-remove { text-align: center !important; vertical-align: middle !important; } .woocommerce-cart table.cart td.product-remove a { color: var(--subtle-text) !important; background: transparent !important; font-size: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; transition: all 0.3s ease !important; } .woocommerce-cart table.cart td.product-remove a:hover { color: var(--white) !important; background: #b82105 !important; /* czerwony — akcja destrukcyjna */ } /* Kontrolka ilości w koszyku (mniejsza niż na stronie produktu) */ .woocommerce-cart td.product-quantity .quantity { display: inline-flex !important; flex-direction: row !important; align-items: center !important; border: 1px solid var(--subtle-bg) !important; width: auto !important; height: 44px !important; } .woocommerce-cart td.product-quantity .harkila-qty-btn { width: 32px !important; height: 44px !important; font-size: 16px !important; } .woocommerce-cart td.product-quantity .quantity input.qty { width: 40px !important; height: 44px !important; font-size: 14px !important; } /* Pole kodu rabatowego */ .woocommerce-cart .coupon { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .woocommerce-cart .coupon input { flex: 0 0 180px !important; width: 180px !important; border: 1px solid var(--subtle-bg) !important; border-radius: 0 !important; padding: 12px 16px !important; font-size: 12px !important; letter-spacing: 1px !important; color: var(--strong-text) !important; background: transparent !important; box-shadow: none !important; } .woocommerce-cart .coupon input::placeholder { color: var(--subtle-text) !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; } /* Przyciski "Zastosuj kupon" i "Aktualizuj koszyk" */ .woocommerce-cart .coupon .button, .woocommerce-cart .actions .button { background: transparent !important; border: 1px solid var(--subtle-bg) !important; color: var(--strong-text) !important; border-radius: 0 !important; padding: 12px 20px !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; transition: all 0.3s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } .woocommerce-cart .coupon .button:hover, .woocommerce-cart .actions .button:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; } /* Podsumowanie koszyka (prawa kolumna) */ .woocommerce-cart .cart_totals { background: var(--lighter-bg) !important; padding: 32px !important; } .woocommerce-cart .cart_totals h2 { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: var(--strongest-text) !important; margin-bottom: 24px !important; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { padding: 12px 0 !important; border-bottom: 1px solid var(--subtle-bg) !important; color: var(--strong-text) !important; font-size: 13px !important; } .woocommerce-cart .cart_totals table th { color: var(--subtle-text) !important; font-weight: 500 !important; letter-spacing: 1px !important; } /* Wiersz "Razem" */ .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { color: var(--strongest-text) !important; font-weight: 600 !important; font-size: 15px !important; border-bottom: none !important; padding-top: 20px !important; } /* Przycisk "Przejdź do kasy" */ .woocommerce-cart .wc-proceed-to-checkout .checkout-button { background: var(--accent) !important; color: var(--white) !important; border: none !important; border-radius: 0 !important; padding: 16px 32px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; width: 100% !important; text-align: center !important; display: block !important; transition: all 0.4s ease !important; margin-top: 20px !important; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--accent-alt) !important; } /* =========================================== 24. WOOCOMMERCE — KASA (CHECKOUT) =========================================== */ .woocommerce-checkout .site-main, .woocommerce-checkout #primary { background: var(--subtle-bg) !important; } .woocommerce-checkout .woocommerce { background: var(--white) !important; padding: 40px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; } .woocommerce-checkout .woocommerce-info { background: var(--lighter-bg) !important; border-top-color: var(--accent) !important; color: var(--strong-text) !important; font-size: 13px !important; } .woocommerce-checkout .woocommerce-info a { color: var(--accent) !important; } .woocommerce-checkout h3 { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: var(--strongest-text) !important; margin-bottom: 24px !important; } /* Etykiety pól formularza */ .woocommerce-checkout .woocommerce-billing-fields label, .woocommerce-checkout .woocommerce-shipping-fields label, .woocommerce-checkout .woocommerce-additional-fields label { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--strong-text) !important; font-weight: 500 !important; margin-bottom: 6px !important; } /* Pola input/select/textarea */ .woocommerce-checkout .woocommerce-input-wrapper input, .woocommerce-checkout .woocommerce-input-wrapper select, .woocommerce-checkout .woocommerce-input-wrapper textarea { border: 1px solid var(--subtle-bg) !important; border-radius: 0 !important; padding: 12px 14px !important; font-size: 13px !important; color: var(--strong-text) !important; background: transparent !important; box-shadow: none !important; transition: border-color 0.3s ease !important; } /* Focus — zielone obramowanie */ .woocommerce-checkout .woocommerce-input-wrapper input:focus, .woocommerce-checkout .woocommerce-input-wrapper select:focus, .woocommerce-checkout .woocommerce-input-wrapper textarea:focus { border-color: var(--accent) !important; outline: none !important; box-shadow: none !important; } /* Select2 (lista krajów) */ .woocommerce-checkout .select2-container .select2-selection--single { border: 1px solid var(--subtle-bg) !important; border-radius: 0 !important; height: 46px !important; } .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px !important; color: var(--strong-text) !important; font-size: 13px !important; padding-left: 14px !important; } .woocommerce-checkout #order_review_heading { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: var(--strongest-text) !important; margin-bottom: 24px !important; } /* Tabela podsumowania zamówienia */ .woocommerce-checkout table.shop_table { border: none !important; } .woocommerce-checkout table.shop_table th { font-size: 11px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--subtle-text) !important; font-weight: 500 !important; border-bottom: 1px solid var(--subtle-bg) !important; padding: 12px 0 !important; } .woocommerce-checkout table.shop_table td { color: var(--strong-text) !important; font-size: 13px !important; border-bottom: 1px solid var(--subtle-bg) !important; padding: 12px 0 !important; } .woocommerce-checkout table.shop_table .order-total th, .woocommerce-checkout table.shop_table .order-total td { color: var(--strongest-text) !important; font-weight: 600 !important; font-size: 15px !important; border-bottom: none !important; padding-top: 20px !important; } .woocommerce-checkout .woocommerce-privacy-policy-text { color: var(--subtle-text) !important; font-size: 12px !important; line-height: 1.7 !important; } .woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--accent) !important; } /* Przycisk "Złóż zamówienie" */ .woocommerce-checkout #place_order { background: var(--accent) !important; color: var(--white) !important; border: none !important; border-radius: 0 !important; padding: 16px 32px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; width: 100% !important; display: block !important; transition: all 0.4s ease !important; margin-top: 20px !important; cursor: pointer !important; } .woocommerce-checkout #place_order:hover { background: var(--accent-alt) !important; } /* =========================================== 25. WOOCOMMERCE — MOJE KONTO =========================================== */ .woocommerce-account a { color: var(--accent) !important; } .woocommerce-account a:hover { color: var(--accent-alt) !important; } .woocommerce-account .woocommerce-MyAccount-navigation a { color: var(--accent) !important; } .woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--accent-alt) !important; } /* Przycisk akcji (np. "Przejdź do kasy") */ .woocommerce-account .wc-forward { color: var(--white) !important; background: var(--accent) !important; border: 1px solid var(--accent) !important; padding: 8px 16px !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; } .woocommerce-account .wc-forward:hover { background: var(--accent-alt) !important; border-color: var(--accent-alt) !important; color: var(--white) !important; } .woocommerce-account .woocommerce-Address-title { display: block !important; margin-bottom: 16px !important; } .woocommerce-account .woocommerce-Address-title h2 { margin-bottom: 8px !important; } .woocommerce-account .woocommerce-Address-title .edit { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--accent) !important; display: inline-block !important; } .woocommerce-account .woocommerce-Address-title .edit:hover { color: var(--accent-alt) !important; } /* =========================================== 26. CART DRAWER (WYSUWANY KOSZYK) #cart-drawer — kontener wysuwanej panelu koszyka. Inicjowany przez Kadence, stylowany całkowicie własnym CSS. .drawer-header — górny pasek (ciemnozielony) .mini-cart-container — lista produktów .mini_cart_item — pojedynczy wiersz produktu .total — podsumowanie kwoty .buttons / .woocommerce-mini-cart__buttons — przyciski akcji =========================================== */ #cart-drawer .drawer-inner { background-color: var(--white) !important; } /* Nagłówek panelu */ #cart-drawer .drawer-header { background-color: var(--accent-alt) !important; padding: 20px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid rgba(250,247,242,0.1) !important; } #cart-drawer .side-cart-header { color: var(--white) !important; font-size: 12px !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-weight: 500 !important; margin: 0 !important; } #cart-drawer .cart-toggle-close .kadence-close-svg { fill: var(--white) !important; transition: fill 0.3s ease; } #cart-drawer .cart-toggle-close:hover .kadence-close-svg { fill: var(--accent-complement) !important; } #cart-drawer .drawer-content { background-color: var(--white) !important; padding: 0 !important; } #cart-drawer .mini-cart-container { background-color: var(--white) !important; padding: 16px !important; } /* Pusta lista koszyka */ #cart-drawer .woocommerce-mini-cart__empty-message { color: var(--subtle-text) !important; text-align: center !important; padding: 60px 20px !important; font-size: 12px !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-weight: 400 !important; border: 1px dashed var(--subtle-bg) !important; } #cart-drawer .cart_list { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Pojedynczy produkt w drawerze */ #cart-drawer .cart_list li.mini_cart_item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 16px 0 !important; border-bottom: 1px solid var(--subtle-bg) !important; background-color: var(--white) !important; position: relative !important; transition: opacity 0.3s ease, transform 0.4s ease !important; } /* Miniatura zdjęcia produktu */ #cart-drawer .mini_cart_item a img { width: 64px !important; height: 64px !important; object-fit: cover !important; border: 1px solid var(--subtle-bg) !important; flex-shrink: 0 !important; } /* Link do produktu */ #cart-drawer .mini_cart_item > a:not(.remove) { display: flex !important; align-items: center !important; gap: 12px !important; color: var(--strongest-text) !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; font-weight: 500 !important; text-decoration: none !important; flex: 1 !important; min-width: 0 !important; } #cart-drawer .mini_cart_item > a:not(.remove):hover { color: var(--accent) !important; } /* Przycisk usuń produkt z drawera */ #cart-drawer .mini_cart_item .remove_from_cart_button { position: absolute !important; top: 12px !important; right: 0 !important; width: 22px !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--subtle-text) !important; font-size: 0 !important; /* ukrycie oryginalnego tekstu "×" */ text-decoration: none !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 0 !important; transition: all 0.3s ease !important; padding: 0 !important; line-height: 1 !important; } /* Zamiana na własny znak × */ #cart-drawer .mini_cart_item .remove_from_cart_button::before { content: '✕' !important; font-size: 12px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #cart-drawer .quantity { color: var(--medium-text) !important; font-size: 12px !important; } #cart-drawer .woocommerce-Price-amount { color: var(--accent) !important; font-weight: 600 !important; } /* Pasek sumy */ #cart-drawer .woocommerce-mini-cart__total, #cart-drawer .total { border-top: 1px solid var(--subtle-bg) !important; padding: 16px 0 !important; margin-top: 8px !important; color: var(--strongest-text) !important; font-size: 12px !important; letter-spacing: 2px !important; text-transform: uppercase !important; background-color: var(--white) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } #cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount { color: var(--accent) !important; font-weight: 700 !important; font-size: 16px !important; } /* Przyciski "Koszyk" i "Kasa" */ #cart-drawer .woocommerce-mini-cart__buttons, #cart-drawer .buttons { display: flex !important; flex-direction: column !important; gap: 8px !important; padding-top: 8px !important; } #cart-drawer .woocommerce-mini-cart__buttons a, #cart-drawer .buttons a { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 14px 24px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; border-radius: 0 !important; transition: all 0.4s ease !important; text-decoration: none !important; box-shadow: none !important; min-height: 44px !important; } /* Przycisk "Koszyk" — obramowany */ #cart-drawer .woocommerce-mini-cart__buttons .button:first-child, #cart-drawer .buttons .button:first-child { background: transparent !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; } #cart-drawer .woocommerce-mini-cart__buttons .button:first-child:hover, #cart-drawer .buttons .button:first-child:hover { background: var(--accent) !important; color: var(--white) !important; } /* Przycisk "Przejdź do kasy" — solidny zielony */ #cart-drawer .woocommerce-mini-cart__buttons .checkout, #cart-drawer .buttons .checkout { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--white) !important; } #cart-drawer .woocommerce-mini-cart__buttons .checkout:hover, #cart-drawer .buttons .checkout:hover { background: var(--accent-alt) !important; border-color: var(--accent-alt) !important; } /* Overlay (tło za drawerem) */ #cart-drawer .drawer-overlay { background-color: rgba(30,43,31,0.6) !important; } /* Warianty (rozmiar/kolor) wyświetlone w drawerze jako inline tekst */ .woocommerce-mini-cart-item dl.variation { display: inline !important; margin: 0 !important; } .woocommerce-mini-cart-item dl.variation dt, .woocommerce-mini-cart-item dl.variation dd { display: inline !important; font-size: 11px !important; font-weight: 400 !important; color: var(--medium-text) !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-mini-cart-item dl.variation dd p { display: inline !important; margin: 0 !important; } .woocommerce-mini-cart-item dl.variation dt::after { content: "\00a0" !important; } .woocommerce-mini-cart-item dl.variation dt { color: var(--subtle-text) !important; } .woocommerce-mini-cart-item dl.variation dd { color: var(--strong-text) !important; font-weight: 600 !important; } /* =========================================== 27. SEARCH DRAWER (WYSUWANA WYSZUKIWARKA) Ciemne tło (--accent-alt), pełna szerokość. Pole wyszukiwania bez obramowania, tylko linia dolna. Przycisk "Szukaj" ukryty — zatwierdzenie Enter. =========================================== */ #search-drawer .drawer-inner { background-color: var(--accent-alt) !important; } #search-drawer .search-field { background-color: transparent !important; border: none !important; border-bottom: 1px solid rgba(250,247,242,0.2) !important; color: var(--white) !important; border-radius: 0 !important; font-size: 18px !important; letter-spacing: 3px !important; padding: 16px 0 !important; } #search-drawer .search-field::placeholder { color: rgba(250,247,242,0.3) !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-size: 14px !important; } #search-drawer .search-field:focus { border-bottom-color: var(--accent-complement) !important; outline: none !important; box-shadow: none !important; } #search-drawer button[type="submit"] { background: transparent !important; color: var(--white) !important; } #search-drawer .kadence-close-svg { fill: var(--white) !important; } #search-drawer .kadence-search-icon-wrap svg { fill: rgba(250,247,242,0.3) !important; } /* Przycisk "Szukaj" — ukryty, zatwierdzenie tylko przez Enter */ #search-drawer button[type="submit"], #search-drawer .search-submit { display: none !important; } /* =========================================== 28. STRONA FAQ / KONTAKT .kb-row-layout-id41_* — ID bloków Kadence na tej podstronie. Akordeony: .kt-accordion-inner-wrap + .kt-blocks-accordion-header. Formularz: .kb-form z polami .kb-field. =========================================== */ .kb-row-layout-id41_ca6069-82 { background-color: var(--accent-alt) !important; padding-top: 80px !important; padding-bottom: 80px !important; } .kb-row-layout-id41_ca6069-82 .kt-row-layout-overlay { background: linear-gradient(135deg, rgba(30,43,31,0.95) 0%, rgba(44,62,45,0.85) 100%) !important; } .kb-row-layout-id41_ca6069-82 h1 { color: var(--white) !important; font-weight: 300 !important; letter-spacing: 6px !important; font-size: clamp(24px,4vw,36px) !important; } .kb-row-layout-id41_ca6069-82 p.wp-block-kadence-advancedheading { color: rgba(250,247,242,0.6) !important; font-size: 13px !important; letter-spacing: 3px !important; text-transform: uppercase !important; } .kb-row-layout-id41_ca6069-82 .kb-button.kt-button { background: rgba(30,43,31,0.6) !important; border: 1px solid rgba(250,247,242,0.3) !important; color: var(--white) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } .kb-row-layout-id41_ca6069-82 .kb-button.kt-button:hover { background: var(--accent) !important; border-color: var(--accent) !important; } /* Sekcje z treścią FAQ */ .kb-row-layout-id41_d30424-bb { background-color: var(--lighter-bg) !important; padding: 80px 0 !important; } .kb-row-layout-id41_b91f92-bf { background-color: var(--subtle-bg) !important; padding: 80px 0 !important; } .kb-row-layout-id41_9838ce-bf { background-color: var(--lighter-bg) !important; padding: 80px 0 !important; } .kb-row-layout-id41_d30424-bb h2, .kb-row-layout-id41_b91f92-bf h2, .kb-row-layout-id41_9838ce-bf h2 { color: var(--strongest-text) !important; font-weight: 300 !important; letter-spacing: 5px !important; font-size: 22px !important; margin-bottom: 32px !important; } /* Akordeony — nagłówki i panele */ .kt-accordion-inner-wrap { border-top: 1px solid rgba(0,0,0,0.08) !important; } .kt-blocks-accordion-header { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; padding: 18px 0 !important; width: 100% !important; text-align: left !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; transition: color 0.3s ease !important; } .kt-blocks-accordion-title { color: var(--strong-text) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 1px !important; line-height: 1.5 !important; } /* Aktywny akordeon — tytuł zmienia kolor na zielony */ .kt-accordion-panel-active .kt-blocks-accordion-title, .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-title { color: var(--accent) !important; } /* Ikona +/- akordeonu — zbudowana z pseudo-elementów */ .kt-blocks-accordion-icon-trigger { flex-shrink: 0 !important; width: 16px !important; height: 16px !important; position: relative !important; margin-left: 16px !important; } .kt-blocks-accordion-icon-trigger::before, .kt-blocks-accordion-icon-trigger::after { content: '' !important; position: absolute !important; background-color: var(--accent) !important; transition: all 0.3s ease !important; } /* Pozioma kreska ikony */ .kt-blocks-accordion-icon-trigger::before { width: 16px !important; height: 1px !important; top: 50% !important; left: 0 !important; } /* Pionowa kreska ikony (znika przy rozwinięciu) */ .kt-blocks-accordion-icon-trigger::after { width: 1px !important; height: 16px !important; top: 0 !important; left: 50% !important; } .kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::after { transform: rotate(90deg) !important; opacity: 0 !important; } .kt-accordion-panel-inner { padding: 16px 0 24px !important; } .kt-accordion-panel-inner p { color: var(--medium-text) !important; font-size: 14px !important; line-height: 1.85 !important; margin: 0 !important; } /* Formularz kontaktowy */ .kb-row-layout-id41_135542-0e { background-color: var(--white) !important; padding: 40px !important; border: 1px solid var(--subtle-bg) !important; } .kb-row-layout-id41_135542-0e h5 { color: var(--strongest-text) !important; font-weight: 300 !important; letter-spacing: 4px !important; font-size: 16px !important; margin-bottom: 24px !important; } /* Pola formularza — styl "underline" */ .kb-form .kb-field { width: 100% !important; background: transparent !important; border: none !important; border-bottom: 1px solid var(--subtle-bg) !important; border-radius: 0 !important; padding: 12px 0 !important; font-size: 13px !important; color: var(--strong-text) !important; letter-spacing: 1px !important; transition: border-color 0.3s ease !important; margin-bottom: 16px !important; box-shadow: none !important; outline: none !important; } .kb-form .kb-field::placeholder { color: var(--subtle-text) !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; } .kb-form .kb-field:focus { border-bottom-color: var(--accent) !important; box-shadow: none !important; outline: none !important; } .kb-form .kb-textarea-field { resize: none !important; } /* Przycisk wyślij formularz */ .kb-forms-submit { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--white) !important; padding: 14px 32px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; border-radius: 0 !important; cursor: pointer !important; transition: all 0.4s ease !important; width: 100% !important; margin-top: 8px !important; } .kb-forms-submit:hover { background: var(--accent-alt) !important; border-color: var(--accent-alt) !important; } /* =========================================== 29. STRONA O MARCE Własna strona budowana jako HTML w page template. Wszystkie klasy mają prefix .hom- (Härkila O Marce). Ważne klasy struktury: .hom-hero — sekcja hero pełnoekranowa .hom-about — sekcja "O marce" (siatka 2 kol.) .hom-collections — karty kolekcji (grid 4 kol.) .hom-philosophy — sekcja technologie/filozofia .hom-cta — sekcja CTA z tłem .hom-card — karta z zdjęciem i opisem .hom-collection-card — karta kolekcji =========================================== */ .hom-page { font-family: inherit; overflow-x: hidden; } .hom-eyebrow { display: block; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: rgba(191,184,175,0.7); margin-bottom: 16px; } .hom-eyebrow--dark { color: var(--subtle-text); } .hom-divider { width: 40px; height: 1px; background: var(--accent); margin: 24px 0; opacity: 0.5; } /* --- Hero --- */ .hom-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hom-hero-bg { position: absolute; inset: 0; } .hom-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hom-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(10,18,11,0.90) 0%, rgba(10,18,11,0.60) 55%, rgba(10,18,11,0.20) 100% ); } .hom-hero-content { position: relative; z-index: 2; padding: 120px 8% 80px; width: 100%; } .hom-hero-inner { max-width: 600px; } .hom-hero-title { font-size: clamp(40px, 5vw, 72px); font-weight: 300; letter-spacing: 10px; text-transform: uppercase; color: var(--white); line-height: 1.05; margin: 0 0 24px 0; } .hom-hero-divider { width: 60px; height: 1px; background: var(--accent-complement); margin-bottom: 28px; opacity: 0.6; } .hom-hero-sub { font-size: 15px; color: rgba(191,184,175,0.8); letter-spacing: 0.5px; line-height: 1.85; margin-bottom: 48px; font-style: italic; } /* Statystyki (np. "1923 · Założona w Danii") */ .hom-hero-stats { display: flex; align-items: center; gap: 40px; margin-bottom: 52px; padding-bottom: 48px; border-bottom: 1px solid rgba(191,184,175,0.15); } .hom-hero-stat { display: flex; flex-direction: column; gap: 8px; } .hom-hero-stat strong { font-size: 30px; font-weight: 300; letter-spacing: 3px; color: var(--white); line-height: 1; } .hom-hero-stat span { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(191,184,175,0.5); } .hom-hero-stat-divider { width: 1px; height: 36px; background: rgba(191,184,175,0.2); flex-shrink: 0; } /* Przycisk hero */ .hom-hero-btn { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--white); border: 1px solid rgba(191,184,175,0.4); padding: 16px 48px; text-decoration: none; transition: all 0.3s ease; } .hom-hero-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); } /* --- O marce --- */ .hom-about { background: var(--lighter-bg); padding: 100px 8%; } .hom-about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1400px; margin: 0 auto; } .hom-about-text h2 { font-size: clamp(24px, 3vw, 44px); font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--strongest-text); line-height: 1.2; margin: 0; } .hom-about-text p { font-size: 15px; line-height: 1.9; color: var(--strong-text); margin-bottom: 16px; } .hom-about-image { position: relative; } .hom-about-image img { width: 100%; height: 480px; object-fit: cover; display: block; } /* Mała plakietka z rokiem założenia */ .hom-about-badge { position: absolute; bottom: -24px; right: -24px; width: 100px; height: 100px; background: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .hom-about-badge strong { font-size: 28px; font-weight: 300; color: var(--white); letter-spacing: 2px; line-height: 1; } .hom-about-badge span { font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: rgba(250,247,242,0.6); } /* Nagłówki sekcji */ .hom-section-header { margin-bottom: 56px; } .hom-section-header h2 { font-size: clamp(24px, 3.5vw, 48px); font-weight: 300; letter-spacing: 6px; text-transform: uppercase; color: var(--strongest-text); margin: 0; line-height: 1.1; } .hom-section-header--light h2 { color: var(--white); } /* --- Kolekcje (4 karty) --- */ .hom-collections { background: var(--accent-alt); padding: 100px 8%; } .hom-collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .hom-collection-card { position: relative; overflow: hidden; min-height: 480px; display: flex; flex-direction: column; } .hom-collection-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; filter: brightness(0.7); } .hom-collection-card:hover img { transform: scale(1.05); filter: brightness(0.6); } /* Treść karty — nad zdjęciem */ .hom-collection-card-content { position: relative; z-index: 2; margin-top: auto; padding: 28px 24px; background: linear-gradient(to top, rgba(10,18,11,0.92) 0%, transparent 100%); } .hom-collection-card-content h3 { font-size: 14px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--white); margin: 0 0 8px 0; } .hom-collection-card-content p { font-size: 11px; letter-spacing: 1px; color: rgba(191,184,175,0.7); margin: 0 0 20px 0; line-height: 1.5; } .hom-collection-btn { display: inline-block; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--white); border: 1px solid rgba(191,184,175,0.4); padding: 10px 20px; text-decoration: none; transition: all 0.3s ease; } .hom-collection-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); } /* --- Technologie / Filozofia (3 karty) --- */ .hom-philosophy { background: var(--white); padding: 100px 8%; } .hom-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .hom-card { position: relative; overflow: hidden; background: var(--subtle-bg); } .hom-card-image { position: relative; height: 320px; overflow: hidden; } .hom-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .hom-card:hover .hom-card-image img { transform: scale(1.05); } .hom-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,43,31,0.6) 0%, transparent 60%); } .hom-card-body { padding: 28px 32px; background: var(--lighter-bg); } .hom-card-body h3 { font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--strongest-text); margin: 0 0 10px 0; } .hom-card-body p { font-size: 13px; line-height: 1.7; color: var(--medium-text); margin: 0; } /* --- CTA z tłem --- */ .hom-cta { position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hom-cta-bg { position: absolute; inset: 0; } .hom-cta-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hom-cta-overlay { position: absolute; inset: 0; background: rgba(10,18,11,0.72); } .hom-cta-content { position: relative; z-index: 2; text-align: center; padding: 0 8%; } .hom-cta-content h2 { font-size: clamp(28px, 5vw, 72px); font-weight: 300; letter-spacing: 8px; text-transform: uppercase; color: var(--white); line-height: 1.15; margin: 0 0 48px 0; } .hom-cta-btn { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--white); border: 1px solid rgba(191,184,175,0.4); padding: 16px 48px; text-decoration: none; transition: all 0.3s ease; } .hom-cta-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); } /* =========================================== 30. STOPKA Trzy warstwy: .site-top-footer-wrap — 3 kolumny: dane, menu, kontakt .site-bottom-footer-wrap — copyright + menu prawne =========================================== */ .site-footer { background: var(--accent-alt) !important; border-top: 1px solid rgba(255,255,255,0.06) !important; } /* Górna stopka */ .site-top-footer-wrap .site-footer-row-container-inner { padding: 0 !important; } .site-top-footer-wrap .site-container { padding-top: 40px !important; padding-bottom: 36px !important; } .site-top-footer-inner-wrap { align-items: flex-start !important; } .site-footer-top-section-1, .site-footer-top-section-2, .site-footer-top-section-3 { align-self: flex-start !important; } /* Kolumna 1 — dane firmy */ #block-15 { font-size: 12px !important; line-height: 2.2 !important; color: rgba(191,184,175,0.65) !important; letter-spacing: 1px !important; } /* Kolumna 2 — menu nawigacyjne stopki */ #footer-navigation #footer-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } #footer-navigation #footer-menu li { margin: 0 !important; padding: 0 !important; } #footer-navigation #footer-menu li a { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(191,184,175,0.65) !important; text-decoration: none !important; transition: color 0.2s ease !important; display: block !important; padding: 7px 0 !important; line-height: 1.4 !important; } #footer-navigation #footer-menu li a:hover { color: var(--white) !important; } /* Kolumna 3 — dane kontaktowe */ #block-26 { font-size: 12px !important; line-height: 2.2 !important; color: rgba(191,184,175,0.65) !important; letter-spacing: 1px !important; display: block !important; } #block-26 a { color: rgba(191,184,175,0.65) !important; text-decoration: none !important; transition: color 0.2s ease !important; } #block-26 a:hover { color: var(--white) !important; } /* Dolna stopka — copyright i menu prawne */ .site-bottom-footer-wrap { border-top: 1px solid rgba(255,255,255,0.06) !important; background: rgba(0,0,0,0.18) !important; } .site-bottom-footer-wrap .site-footer-row-container-inner { padding: 0 !important; } .site-bottom-footer-wrap .site-container { padding-top: 16px !important; padding-bottom: 16px !important; padding-left: 40px !important; padding-right: 40px !important; } .site-bottom-footer-inner-wrap { align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; } /* Tekst copyright */ .footer-html-inner p { font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(191,184,175,0.35) !important; margin: 0 !important; } /* Menu prawne (Regulamin, Polityka prywatności...) */ #menu-help { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 8px 20px !important; } #menu-help li { margin: 0 !important; padding: 0 !important; } #menu-help li a { font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(191,184,175,0.5) !important; text-decoration: none !important; transition: color 0.2s ease !important; } #menu-help li a:hover { color: var(--white) !important; } /* Kontrast linków — nadpisanie dla czytelności */ #footer-navigation #footer-menu li a, #block-26 a, #block-15 a { color: #BFB8AF !important; } #footer-navigation #footer-menu li a:hover, #block-26 a:hover, #block-15 a:hover { color: #FAF7F2 !important; } #menu-help li a { color: rgba(191,184,175,0.7) !important; } #menu-help li a:hover { color: #FAF7F2 !important; } /* =========================================== 31. BANER COOKIES (GDPR Cookie Compliance) Plugin: GDPR Cookie Compliance by Moove Agency. Selektor root: #moove_gdpr_cookie_info_bar Przyciski: .moove-gdpr-infobar-allow-btn (akceptuj) .moove-gdpr-infobar-reject-btn (odrzuć) Przycisk ustawień jest ukryty (.moove-gdpr-infobar-settings-btn). =========================================== */ #moove_gdpr_cookie_info_bar { background-color: #1E2B1F !important; border-top: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; padding: 14px 40px !important; font-family: inherit !important; } #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content { display: flex !important; align-items: center !important; justify-content: center !important; gap: 24px !important; flex-wrap: wrap !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; } /* Tekst komunikatu */ #moove_gdpr_cookie_info_bar p, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-text, #moove_gdpr_cookie_info_bar span { font-size: 11px !important; letter-spacing: 1px !important; color: #a59e91 !important; line-height: 1.7 !important; margin: 0 !important; flex: 1 !important; min-width: 200px !important; } #moove_gdpr_cookie_info_bar a { color: #a59e91 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } #moove_gdpr_cookie_info_bar a:hover { color: #FAF7F2 !important; } /* Kontener przycisków */ #moove_gdpr_cookie_info_bar .moove-gdpr-button-holder, #moove_gdpr_cookie_info_bar .gdpr-infobar-action-buttons { display: flex !important; gap: 8px !important; align-items: center !important; flex-shrink: 0 !important; } /* Styl bazowy wszystkich przycisków */ #moove_gdpr_cookie_info_bar button, #moove_gdpr_cookie_info_bar .mgdpr-btn, #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-allow-btn, #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-reject-btn { border-radius: 0 !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; padding: 10px 24px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: none !important; line-height: 1 !important; font-family: inherit !important; white-space: nowrap !important; } /* Przycisk "Akceptuję" */ #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-allow-btn, #moove_gdpr_cookie_info_bar button.mgdpr-btn-first { background-color: #2C3E2D !important; border: 1px solid #2C3E2D !important; color: #FAF7F2 !important; } #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-allow-btn:hover, #moove_gdpr_cookie_info_bar button.mgdpr-btn-first:hover { background-color: #3a5c3b !important; border-color: #3a5c3b !important; color: #FAF7F2 !important; } /* Przycisk "Odrzuć" */ #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-reject-btn, #moove_gdpr_cookie_info_bar button.mgdpr-btn-last { background-color: transparent !important; border: 1px solid rgba(191,184,175,0.3) !important; color: #BFB8AF !important; } #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-reject-btn:hover, #moove_gdpr_cookie_info_bar button.mgdpr-btn-last:hover { border-color: #BFB8AF !important; color: #FAF7F2 !important; } /* Ukrycie przycisku ustawień cookies */ #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-settings-btn, #moove_gdpr_cookie_info_bar button.mgdpr-btn-settings { display: none !important; } /* =========================================== 32. RESPONSIVE Breakpointy: 1024px — tablet 768px — mobile 480px — małe mobile Kolejność: od największego do najmniejszego. =========================================== */ /* --- Tablet (max-width: 1024px) --- */ @media (max-width: 1024px) { .kb-row-layout-id38_e403bc-8a { min-height: 60vh !important; } .kb-row-layout-id38_e403bc-8a h2 { letter-spacing: 5px !important; } .hk-showcase-content { padding: 48px 36px !important; } /* Strona produktu — 1 kolumna */ .single-product div.product { grid-template-columns: 1fr !important; gap: 40px !important; } .single-product div.product .summary { grid-column: 1 !important; grid-row: 2 !important; } .single-product .woocommerce-tabs { grid-column: 1 !important; } .single-product .related.products { grid-column: 1 !important; } /* Strona O marce — kolekcje: 2 kolumny */ .hom-collection-grid { grid-template-columns: repeat(2,1fr) !important; } .hom-collection-card { min-height: 380px; } } /* --- Mobile (max-width: 768px) --- */ @media (max-width: 768px) { /* Logo */ .harkila-logo { width: 130px; } .harkila-logo-tagline { display: none !important; } /* Hero */ .kb-row-layout-id38_e403bc-8a { min-height: 50vh !important; } .kb-row-layout-id38_e403bc-8a h2 { letter-spacing: 3px !important; font-size: 22px !important; } /* Strzałki slidera — ukryte na mobile (swipe zastępuje) */ .kb-row-layout-id38_e403bc-8a .splide__arrow { display: none !important; } /* Przyciski — mniejszy padding i font na mobile */ .kb-button.kt-button, span.kb-button.wp-block-button__link { padding: 12px 28px !important; font-size: 10px !important; letter-spacing: 3px !important; } /* Sekcje — zmniejszone paddingi */ .kb-row-layout-id38_110b73-21, .kb-row-layout-id38_365ba8-1e { padding-top: 60px !important; padding-bottom: 60px !important; } .kb-row-layout-id38_ebf2f5-99, .kb-row-layout-id38_ce790c-6b { padding-top: 50px !important; padding-bottom: 50px !important; } /* Showcase — gradient w dół zamiast w bok */ .hk-showcase-image::after { background: linear-gradient(to bottom, transparent 60%, rgba(245,240,232,1) 100%) !important; } .hk-showcase-row--reverse .hk-showcase-image::after { background: linear-gradient(to bottom, transparent 60%, rgba(245,240,232,1) 100%) !important; } .hk-showcase-content { text-align: center !important; padding: 32px 24px 64px !important; } .hk-showcase-title::after { margin-left: auto; margin-right: auto; } .hk-showcase-desc { max-width: 100% !important; } .hk-showcase-cta { display: flex !important; justify-content: center !important; } /* Strona produktu */ .single-product div.product { padding-top: 24px !important; padding-bottom: 40px !important; } .single-product .woocommerce-product-gallery__image img.wp-post-image { /* height: 360px ; */ } /* Formularz koszyk (produkty proste) — nie łamie się na mobile */ .single-product .cart { flex-wrap: nowrap !important; } .single-product .cart .quantity { width: auto !important; flex-shrink: 0 !important; } .single-product .single_add_to_cart_button { width: auto !important; flex: 1 !important; } /* Formularz z wariantami — może się łamać */ .single-product .woocommerce-variation-add-to-cart { flex-wrap: wrap !important; gap: 8px !important; } .single-product .woocommerce-variation-add-to-cart .quantity { width: 100% !important; justify-content: center !important; } /* Zakładki — poziome przewijanie */ .single-product .woocommerce-tabs ul.tabs { overflow-x: auto !important; white-space: nowrap !important; } /* Koszyk */ .woocommerce-cart .woocommerce { padding: 20px !important; } .woocommerce-cart table.cart { font-size: 12px !important; } .woocommerce-cart .coupon { flex-direction: column !important; align-items: flex-start !important; } .woocommerce-cart .coupon input { flex: none !important; width: 100% !important; } /* Checkout */ .woocommerce-checkout .woocommerce { padding: 20px !important; } /* FAQ */ .kb-row-layout-id41_ca6069-82 { padding-top: 50px !important; padding-bottom: 50px !important; } .kb-row-layout-id41_d30424-bb, .kb-row-layout-id41_b91f92-bf, .kb-row-layout-id41_9838ce-bf { padding: 50px 0 !important; } .kb-row-layout-id41_135542-0e { padding: 24px !important; } /* O marce */ .hom-hero-content { padding: 0 24px 60px; } .hom-hero-title { font-size: 32px !important; letter-spacing: 4px !important; } .hom-hero-sub { font-size: 13px; } .hom-hero-stats { gap: 20px; flex-wrap: wrap; margin-bottom: 36px; padding-bottom: 36px; } .hom-hero-stat-divider { display: none; } .hom-hero-stat strong { font-size: 24px; } .hom-hero-btn { width: 100%; text-align: center; padding: 14px 32px; } .hom-about { padding: 60px 24px; } .hom-about-inner { grid-template-columns: 1fr; gap: 40px; } .hom-about-badge { right: 0; bottom: 0; } .hom-about-text h2 { font-size: 28px !important; letter-spacing: 3px !important; } .hom-philosophy, .hom-collections { padding: 60px 24px !important; } .hom-cards { grid-template-columns: 1fr !important; } .hom-collection-grid { grid-template-columns: 1fr !important; } .hom-collection-card { min-height: 320px; } .hom-card-image { height: 240px; } .hom-section-header h2 { font-size: 24px !important; letter-spacing: 3px !important; } .hom-collection-card-content h3 { font-size: 13px !important; letter-spacing: 3px !important; } .hom-cta-content h2 { font-size: 28px !important; letter-spacing: 4px !important; } /* Stopka */ .site-top-footer-wrap .site-container { padding-top: 36px !important; padding-bottom: 28px !important; padding-left: 24px !important; padding-right: 24px !important; } .site-bottom-footer-wrap .site-container { padding: 14px 24px !important; } .site-bottom-footer-inner-wrap { flex-direction: column !important; align-items: flex-start !important; } #menu-help { justify-content: flex-start !important; gap: 8px 16px !important; } /* Baner cookies */ #moove_gdpr_cookie_info_bar { padding: 14px 20px !important; } #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } #moove_gdpr_cookie_info_bar .moove-gdpr-button-holder, #moove_gdpr_cookie_info_bar .gdpr-infobar-action-buttons { width: 100% !important; } #moove_gdpr_cookie_info_bar button, #moove_gdpr_cookie_info_bar .mgdpr-btn { flex: 1 !important; text-align: center !important; justify-content: center !important; } /* Tagline mobile — poniżej logo */ .harkila-logo-tagline { display: block !important; font-size: 7px !important; letter-spacing: 3px !important; border-left: none !important; padding-left: 0 !important; padding-top: 4px !important; width: auto !important; color: var(--accent-complement) !important; } .mobile-site-branding a.brand { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; } } /* --- Małe mobile (max-width: 480px) --- */ @media (max-width: 480px) { .harkila-logo { width: 110px; } .mobile-site-branding .harkila-logo { width: 110px; } .kb-row-layout-id38_e403bc-8a h2 { font-size: 18px !important; letter-spacing: 2px !important; } .kb-row-layout-id38_365ba8-1e h2 { font-size: 18px !important; letter-spacing: 3px !important; } .wc-block-grid__product .product-details { padding: 12px !important; } .wc-block-grid__product-title { font-size: 11px !important; } .hk-showcase-title { font-size: 20px !important; letter-spacing: 3px !important; } .hk-showcase-content { padding: 24px 20px 48px !important; } .single-product .woocommerce-product-gallery__image img.wp-post-image { /* height: 280px !important; */ } .hom-hero-title { font-size: 36px; letter-spacing: 5px; } .hom-collection-card { min-height: 320px !important; } .hom-card-image { height: 240px !important; } } /* =========================================== MISC / POPRAWKI Drobne fixes które nie pasują do żadnej sekcji. =========================================== */ /* Blog — karty postów */ .entry-title a { color: var(--strongest-text) !important; text-decoration: none !important; } .entry-title a:hover { color: var(--accent) !important; } a.post-more-link { color: var(--subtle-text) !important; text-decoration: none !important; } a.post-more-link:hover { color: var(--accent) !important; } a.post-more-link svg { fill: currentColor !important; } /* Swipe mobilny na hero sliderze — nakładki nie mogą przechwytywać touch events */ .kb-row-layout-id38_e403bc-8a .kt-row-layout-overlay, .kb-row-layout-id38_e403bc-8a .kt-row-column-wrap, .kb-row-layout-id38_e403bc-8a .kadence-column38_480e9c-cc, .kb-row-layout-id38_e403bc-8a .kt-inside-inner-col { pointer-events: none !important; } /* Przywrócenie klikalności linków i przycisków wewnątrz slidera */ .kb-row-layout-id38_e403bc-8a .kt-inside-inner-col a, .kb-row-layout-id38_e403bc-8a .kt-inside-inner-col button, .kb-row-layout-id38_e403bc-8a .splide__arrow { pointer-events: auto !important; } label.checkbox a { color: #000000 !important; }