/* Theme Name: Astra Child Theme URI: https://wpastra.com/ Description: Motyw potomny dla Astra — sklep Sofpol Author: Angelika Template: astra Version: 2.1 */ /* Kolory marki — jedna zmiana tutaj propaguje się wszędzie */ :root { --sofpol-yellow: #FFD600; --sofpol-yellow-hover: #FFC400; --sofpol-dark: #1E1E1C; --sofpol-muted: #6b6b66; --sofpol-border: #e6e4dd; } /* ========================================================= NAGŁÓWEK na listingu sklepu — normalny przepływ, jasne tło (jeden spójny blok; .ast-woo-shop-archive jest w na sklepie i archiwach produktów) ========================================================= */ .ast-woo-shop-archive #masthead { position: relative !important; background: #ffffff !important; border-bottom: 1px solid var(--sofpol-border); z-index: 99; } .ast-woo-shop-archive #masthead .main-header-bar, .ast-woo-shop-archive #masthead .ast-main-header-wrap, .ast-woo-shop-archive #masthead .ast-above-header-wrap { position: relative; background: transparent; } /* Ciemne linki menu i koszyk na jasnym tle */ .ast-woo-shop-archive #masthead .menu-link, .ast-woo-shop-archive #masthead .main-header-menu .menu-item > .menu-link, .ast-woo-shop-archive #masthead .site-title a, .ast-woo-shop-archive #masthead .ast-header-woo-cart .ast-cart-menu-wrap { color: var(--sofpol-dark) !important; } /* Treść NIE podjeżdża pod nagłówek (relikt transparent headera) */ .ast-woo-shop-archive #content, .ast-woo-shop-archive .site-content { margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================= HERO ========================================================= */ .sofpol-hero { background: var(--sofpol-dark); text-align: center; padding: 56px 24px 44px; } .sofpol-hero__title { color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.25; margin: 0; } .sofpol-hero__sub { color: #c9c7bf; font-family: 'Inter', sans-serif; font-size: clamp(0.95rem, 1.6vw, 1.05rem); max-width: 560px; margin: 12px auto 0; line-height: 1.55; } /* ========================================================= PAS ZAUFANIA ========================================================= */ .sofpol-trustbar { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 36px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--sofpol-border); background: #fff; } .sofpol-trustbar li { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--sofpol-muted); display: flex; align-items: center; gap: 7px; margin: 0; } .sofpol-trustbar .dashicons { font-size: 17px; width: 17px; height: 17px; color: var(--sofpol-dark); } /* ========================================================= KAFELEK PRODUKTU ========================================================= */ .woocommerce ul.products li.product { position: relative; background: #fff; border: 1px solid var(--sofpol-border); border-radius: 12px; overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; text-align: left; padding-bottom: 16px; } .woocommerce ul.products li.product:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } /* Zdjęcie — delikatny zoom na hover */ .woocommerce ul.products li.product a img { margin-bottom: 0; transition: transform 0.35s ease; } .woocommerce ul.products li.product:hover a img { transform: scale(1.03); } /* Treść kafelka: padding + wyrównanie do lewej (Astra centruje .astra-shop-summary-wrap — nadpisujemy) */ .woocommerce ul.products li.product .astra-shop-summary-wrap { text-align: left; padding-left: 16px; padding-right: 16px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 600; text-transform: none; /* Kongo zamiast KONGO — czytelniej */ letter-spacing: 0; padding: 12px 16px 0; } /* Badge nad zdjęciem */ .sofpol-badge { position: absolute; top: 12px; left: 12px; z-index: 5; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; pointer-events: none; } .sofpol-badge.is-bestseller { background: var(--sofpol-dark); color: #fff; } .sofpol-badge.is-new { background: #FBEAF0; color: #4B1528; } .sofpol-badge.is-sale { background: var(--sofpol-yellow); color: #1E1E1C; } /* Linia meta: kategoria · szerokość · funkcja */ .sofpol-loop-meta { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--sofpol-muted); margin: 2px 16px 4px !important; line-height: 1.4; text-align: left; } /* Linia tkanin */ .sofpol-loop-fabrics { font-family: 'Inter', sans-serif; font-size: 0.78rem; color: #9a988f; margin: 0 16px 8px !important; text-align: left; } /* Cena */ .woocommerce ul.products li.product .price { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--sofpol-dark); margin: 0 16px 10px; text-align: left; } .sofpol-price-from { font-weight: 400; font-size: 0.85em; color: var(--sofpol-muted); } /* Przycisk Konfiguruj */ .woocommerce ul.products li.product .button.sofpol-configure { display: inline-block; margin: 0 16px; background: var(--sofpol-yellow); color: var(--sofpol-dark); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9rem; border-radius: 8px; padding: 11px 24px; transition: background 0.25s ease; } .woocommerce ul.products li.product .button.sofpol-configure:hover { background: var(--sofpol-yellow-hover); color: var(--sofpol-dark); } /* ========================================================= PASEK PROCESU pod listingiem ========================================================= */ .sofpol-process { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 40px 0 8px; padding: 18px 20px; border: 1px solid var(--sofpol-border); border-radius: 12px; background: #faf9f6; } .sofpol-process li { font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--sofpol-muted); margin: 0; } .sofpol-process li strong { color: var(--sofpol-dark); margin-right: 4px; } /* ========================================================= NAGŁÓWEK na listingu sklepu — normalny przepływ, jasne tło ========================================================= */ .ast-woo-shop-archive #masthead, .ast-woo-shop-archive #masthead .ast-main-header-wrap, .ast-woo-shop-archive #masthead .main-header-bar, .ast-woo-shop-archive #masthead .ast-above-header-wrap { position: relative !important; top: auto !important; left: auto !important; transform: none !important; background: #ffffff !important; } .ast-woo-shop-archive #masthead { border-bottom: 1px solid var(--sofpol-border); z-index: 99; } .ast-woo-shop-archive #masthead .menu-link, .ast-woo-shop-archive #masthead .main-header-menu .menu-item > .menu-link, .ast-woo-shop-archive #masthead .site-title a, .ast-woo-shop-archive #masthead .ast-header-woo-cart .ast-cart-menu-wrap { color: var(--sofpol-dark) !important; } /* Treść NIE podjeżdża pod nagłówek (relikt transparent headera) */ .ast-woo-shop-archive #content, .ast-woo-shop-archive .site-content { margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================= BLOK ZAUFANIA na karcie produktu ========================================================= */ .sofpol-trust-product { list-style: none; margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--sofpol-border); border-radius: 10px; background: #faf9f6; width: 100%; clear: both; } .sofpol-trust-product li { display: flex; align-items: flex-start; gap: 10px; font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--sofpol-muted); line-height: 1.45; margin: 0 0 9px; } .sofpol-trust-product li:last-child { margin-bottom: 0; } .sofpol-trust-product li strong { color: var(--sofpol-dark); font-weight: 600; } .sofpol-trust-product .dashicons { font-size: 18px; width: 18px; height: 18px; color: var(--sofpol-dark); flex-shrink: 0; margin-top: 1px; } @media (max-width: 767px) { .sofpol-trust-product { padding: 14px; } .sofpol-trust-product li { font-size: 0.84rem; } } /* Przycisk Konfiguruj — bez obrysu/cienia motywu (globalnie) */ .woocommerce ul.products li.product .button.sofpol-configure { border: none !important; box-shadow: none !important; outline: none; } /* ========================================================= MOBILE (< 768px) — kompletna sekcja, zastępuje poprzednią Układ: 1 kolumna (kolumny ustawia Customizer Astry), kafelek = kolumna flex, przycisk zawsze na dole karty. ========================================================= */ @media (max-width: 767px) { /* --- HERO --- */ .sofpol-hero { padding: 36px 20px 28px; } /* --- PAS ZAUFANIA: jedna przewijana linia --- */ .sofpol-trustbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sofpol-trustbar::-webkit-scrollbar { display: none; } .sofpol-trustbar li { white-space: nowrap; } /* --- KAFELEK PRODUKTU --- */ /* Karta i jej wnętrze jako kolumny flex — dzięki temu cena+przycisk zawsze na dole, niezależnie od długości nazwy */ .woocommerce ul.products li.product { display: flex; flex-direction: column; padding-bottom: 14px; } .woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; padding-left: 12px; padding-right: 12px; text-align: left; } /* Nazwa produktu */ .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.95rem; line-height: 1.25; padding: 10px 12px 0; text-align: left; } /* Meta (kategoria · szerokość): jedna linia, wielokropek */ .sofpol-loop-meta { font-size: 0.76rem; margin: 3px 12px 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } /* Linia "40+ tkanin": ukryta na mobile (informacja jest na karcie produktu) */ .sofpol-loop-fabrics { display: none; } /* Cena: margin-top auto dopycha ją (i przycisk) do dołu karty */ .woocommerce ul.products li.product .price { margin: auto 12px 8px !important; font-size: 0.95rem; text-align: left; } /* Przycisk: pełna szerokość, duży cel dotykowy, bez obrysów i cieni motywu */ .woocommerce ul.products li.product .button.sofpol-configure { display: block; float: none; margin: 0 12px; padding: 12px 10px; font-size: 0.85rem; text-align: center; border: none !important; box-shadow: none !important; outline: none; } /* Badge odrobinę mniejszy na małym zdjęciu */ .sofpol-badge { top: 10px; left: 10px; font-size: 0.68rem; padding: 3px 9px; } /* --- PASEK PROCESU pod listingiem --- */ .sofpol-process { flex-direction: column; gap: 10px; align-items: flex-start; } /* --- BLOK ZAUFANIA na karcie produktu --- */ .sofpol-trust-product { padding: 14px; } .sofpol-trust-product li { font-size: 0.84rem; } } /* ========================================================= SOFPOL 2026 — tokeny i komponenty współdzielone (Faza 1) Dopisz na KONIEC style.css motywu potomnego. Wszystko w przestrzeni .sfp-* — nie koliduje z Astra/Woo. ========================================================= */ :root{ --sfp-ink:#1E1E1C; --sfp-paper:#FAF9F6; --sfp-linen:#E9E5DB; --sfp-thread:#6B6B66; --sfp-yellow:#FFD600; --sfp-yellow-press:#F0C400; --sfp-stitch:1px dashed #B9B3A4; --sfp-radius:10px; } /* Typografia nowego designu na nagłówkach całej strony */ body h1, body h2, body h3, body .woocommerce-loop-product__title{ font-family:'Bricolage Grotesque','Inter',sans-serif; letter-spacing:-.015em; } body{ font-family:'Inter',system-ui,sans-serif; } .sfp-mono{ font-family:'Space Mono',monospace; letter-spacing:-.02em; } /* Metka — etykieta sekcji (sygnatura designu) */ .sfp-tag{ display:inline-flex;align-items:center;gap:8px; font-family:'Space Mono',monospace;font-size:.72rem; text-transform:uppercase;letter-spacing:.14em;color:var(--sfp-thread); border:var(--sfp-stitch);border-radius:4px;padding:5px 12px;background:#fff; margin-bottom:18px; } .sfp-tag::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--sfp-yellow);box-shadow:0 0 0 1px #C9B400 inset; } /* Przycisk */ .sfp-btn{ display:inline-block;background:var(--sfp-yellow);color:var(--sfp-ink)!important; font-weight:600;font-size:.95rem;padding:14px 28px;border-radius:8px; text-decoration:none;border:none;cursor:pointer; box-shadow:0 1px 0 #C9B400;transition:transform .15s ease,background .15s ease; } .sfp-btn:hover{ background:var(--sfp-yellow-press);transform:translateY(-1px);color:var(--sfp-ink); } .sfp-btn.sfp-ghost{ background:transparent;box-shadow:none;border:1.5px solid var(--sfp-ink); } .sfp-btn.sfp-ghost:hover{ background:#fff; } .sfp-btn:focus-visible{ outline:3px solid var(--sfp-ink);outline-offset:2px; } /* Karta z przeszywanym obrysem */ .sfp-card{ background:#fff;border:1px solid var(--sfp-linen);border-radius:var(--sfp-radius); padding:26px;position:relative; } .sfp-card::after{ content:"";position:absolute;inset:7px;border:var(--sfp-stitch); border-radius:6px;pointer-events:none; } /* Kroki procesu 01–04 */ .sfp-steps{ counter-reset:krok;display:grid;grid-template-columns:repeat(4,1fr);gap:22px; } .sfp-step{ background:#fff;border:1px solid var(--sfp-linen);border-radius:var(--sfp-radius);padding:26px 22px; } .sfp-step::before{ counter-increment:krok;content:counter(krok,decimal-leading-zero); font-family:'Space Mono',monospace;font-size:.8rem;color:var(--sfp-thread); display:inline-block;border-bottom:2px solid var(--sfp-yellow); padding-bottom:4px;margin-bottom:14px; } .sfp-step h3{ font-size:1.02rem;margin:0 0 8px; } .sfp-step p{ font-size:.9rem;color:var(--sfp-thread);margin:0; } /* Pas zaufania */ .sfp-trust{ list-style:none;display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin:0;padding:14px 24px; } .sfp-trust li{ font-size:.88rem;color:var(--sfp-thread);display:flex;gap:9px;align-items:center;margin:0; } .sfp-trust li::before{ content:"";width:8px;height:8px;border:2px solid var(--sfp-ink);border-radius:2px;transform:rotate(45deg); } /* Siatki pomocnicze */ .sfp-grid-3{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; } .sfp-grid-4{ display:grid;grid-template-columns:repeat(4,1fr);gap:22px; } @media (max-width:960px){ .sfp-grid-3,.sfp-grid-4,.sfp-steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .sfp-grid-3,.sfp-grid-4,.sfp-steps{ grid-template-columns:1fr; } .sfp-trust{ justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;gap:26px; } .sfp-trust li{ white-space:nowrap; } }