/* Theme Name: Shoptimizer — Taste and Travel Theme URI: https://tasteandtravel.pl Description: Motyw potomny Shoptimizera dopasowany do dotychczasowej identyfikacji GoodLife. Author: Taste and Travel Template: shoptimizer Version: 1.0.0 Text Domain: shoptimizer-tt */ /* ------------------------------------------------------------------ Parametry przeniesione z GoodLife 1.8.9 Zrodlo: thb-app-inline-css (ustawienia motywu) + assets/css/app.css ------------------------------------------------------------------ */ :root{ /* kolory wiodace — z ustawien motywu na produkcji */ --tt-accent: #f860a3; /* 42 uzycia — kolor wiodacy */ --tt-accent-dark: #e04a8d; /* przyciemniony na :hover */ --tt-accent-soft: #fff4f9; /* jasne tlo rozowe */ --tt-secondary: #43d3db; /* turkus */ --tt-secondary-alt: #65ffff; --tt-info: #009bef; /* typografia i tekst — z app.css */ --tt-ink: #080808; /* naglowki i linki */ --tt-body: #525252; /* tekst tresci */ --tt-muted: #0c0907; --tt-bg: #ffffff; --tt-line: #f5f5f5; --tt-font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* siatka — .row max-width: 75em */ --tt-container: 1200px; } /* --- typografia --- */ body, button, input, select, textarea{ font-family: var(--tt-font); color: var(--tt-body); background: var(--tt-bg); } /* cena dziedziczy tlo z otoczenia — wczesniej dostawala biale tlo z reguly wyzej i tworzyla jasny prostokat na kazdym ciemniejszym tle (koszyk, karty) */ .woocommerce-Price-amount{ font-family: var(--tt-font); background: none !important; } .woocommerce-Price-amount bdi, .woocommerce-Price-currencySymbol{ background:none !important; } body p{ font-size:16px; line-height:1.6em; } h1,h2,h3,h4,h5,h6{ font-family: var(--tt-font); color: var(--tt-ink); font-weight:600; } h1{ font-size:24px; line-height:28px; margin-bottom:20px; } h2{ font-size:22px; line-height:26px; margin-bottom:20px; } h3{ font-size:20px; line-height:24px; margin-bottom:20px; } /* --- szerokosc ukladu (GoodLife: 75em) --- */ .col-full, .shoptimizer-container, .site-content .woocommerce > .container, .container{ max-width: var(--tt-container); } /* --- linki --- */ a{ color: var(--tt-ink); } a:hover, a:focus{ color: var(--tt-accent); } /* --- akcent: przyciski --- */ .button, button, input[type="submit"], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .single_add_to_cart_button{ background-color: var(--tt-accent); border-color: var(--tt-accent); color:#fff; font-family: var(--tt-font); font-weight:600; letter-spacing:.02em; } .button:hover, button:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .single_add_to_cart_button:hover{ background-color: var(--tt-accent-dark); border-color: var(--tt-accent-dark); color:#fff; } /* --- akcent: elementy sklepu --- */ .woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle{ background-color: var(--tt-accent); } .woocommerce-message, .woocommerce-info{ border-top-color: var(--tt-accent); } .woocommerce-message::before, .woocommerce-info::before{ color: var(--tt-accent); } /* „Powracający klient?" i „Masz kupon?" w kasie miały niebieskie tło z Woo — jedyny błękit na całej stronie. Czerń marki zamiast niego. */ .woocommerce-form-login-toggle .woocommerce-info, .woocommerce-form-coupon-toggle .woocommerce-info{ background:var(--tt-ink) !important; color:#fff !important; border:none !important; border-radius:3px; } .woocommerce-form-login-toggle .woocommerce-info a, .woocommerce-form-coupon-toggle .woocommerce-info a{ color:#fff; text-decoration:underline; } .woocommerce-form-login-toggle .woocommerce-info a:hover, .woocommerce-form-coupon-toggle .woocommerce-info a:hover{ color:var(--tt-accent); } .star-rating span::before, .woocommerce .star-rating span::before{ color: var(--tt-accent); } /* --- koszyk w naglowku --- */ .cart-contents-count, .shoptimizer-cart-count{ background: var(--tt-accent); color:#fff; } /* --- akcent drugi: wyrozniki --- */ .widget_shoptimizer_recent_posts .post-date, .tt-secondary{ color: var(--tt-secondary); } /* --- tla pomocnicze --- Opis produktu i "Podobne produkty" mialy rozowawe tlo (--tt-accent-soft), ktore przygaszalo zdjecia; zostaje biel i delikatna linia oddzielajaca. */ .woocommerce-tabs, .related.products, .cross-sells, .woocommerce-tabs .panel, .related-wrapper{ background:#fff !important; } .woocommerce-tabs, .related.products{ border-top:1px solid var(--tt-line); padding-top:34px; } hr, .shoptimizer-divider{ border-color: var(--tt-line); } /* ------------------------------------------------------------------ Sklep — odwzorowanie kart produktu z GoodLife Zrodlo: zrzut ekranu /sklep/ z produkcji (2026-09-12) ------------------------------------------------------------------ */ /* Baner kategorii sklepowej (`cg-cat-image`, obraz wyróżniający terminu). EBOOK ma tam plik 2000 × 1600 — na pełnej szerokości kontenera rysował się jako 1200 × 960 i spychał wszystkie produkty pod ekran. Przycinamy go do pasa i ścieśniamy odstępy nagłówka archiwum. */ .woocommerce-products-header{ margin:0 0 22px; } .woocommerce-products-header .cg-cat-image{ display:block; width:100%; height:auto; max-height:260px; object-fit:cover; border-radius:6px; margin:0; } .woocommerce-products-header__title.page-title{ margin-bottom:18px; } /* siatka 4-kolumnowa, bez paska bocznego */ .woocommerce ul.products{ display:grid; grid-template-columns:repeat(4,1fr); gap:48px 32px; } @media (max-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(3,1fr); } } @media (max-width:782px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); gap:32px 20px; } } @media (max-width:480px){ .woocommerce ul.products{ grid-template-columns:1fr; } } /* ------------------------------------------------------------------ Rowne kafle produktow (sklep + "Podobne produkty"). Zdjecia produktow i okladki ebookow maja rozne proporcje, wiec: - stale okno obrazka 1:1, obrazek wpisany w nie przez `contain` (nic nie zostaje przyciete), - tytul o stalej wysokosci (2 wiersze), - cena dosunieta do dolu, wiec ceny stoja w jednej linii w calym rzedzie. ------------------------------------------------------------------ */ .woocommerce ul.products li.product{ width:auto; margin:0; float:none; text-align:center; display:flex; flex-direction:column; } .woocommerce ul.products li.product .woocommerce-image__wrapper{ margin-bottom:16px; } .woocommerce ul.products li.product .shoptimizer-plp-image-wrapper, .woocommerce ul.products li.product .shoptimizer-plp-carousel-container{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; background:#fff; overflow:hidden; } .woocommerce ul.products li.product .shoptimizer-plp-image-wrapper img, .woocommerce ul.products li.product a img{ width:100%; height:100%; object-fit:contain; object-position:center; background:none; margin:0; } .woocommerce ul.products li.product .woocommerce-card__header{ display:flex; flex-direction:column; flex:1 1 auto; } .woocommerce ul.products li.product .product__categories{ margin:0 0 7px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; } .woocommerce ul.products li.product .product__categories a{ color:var(--tt-body); text-decoration:none; } .woocommerce ul.products li.product .product__categories a:hover{ color:var(--tt-accent); } /* stala wysokosc tytulu — inaczej ceny w rzedzie stoja na roznych poziomach */ .woocommerce ul.products li.product .woocommerce-loop-product__title{ min-height:3.2em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .woocommerce ul.products li.product .price{ margin-top:auto; } /* tytul i cena wysrodkowane */ .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:15px; line-height:1.45; font-weight:400; color:var(--tt-ink); margin:14px 0 6px; } .woocommerce ul.products li.product .price{ display:block; font-size:15px; color:var(--tt-body); margin-bottom:14px; } /* cena promocyjna — rozowa, oryginalna przekreslona */ .woocommerce ul.products li.product .price ins, .woocommerce div.product p.price ins{ color:var(--tt-accent); text-decoration:none; font-weight:600; } .woocommerce ul.products li.product .price del, .woocommerce div.product p.price del{ color:#9b9b9b; opacity:1; font-weight:400; } /* CTA jako wersalikowy link, nie przycisk */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart{ background:none !important; border:none !important; padding:0 !important; color:var(--tt-ink) !important; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .woocommerce ul.products li.product .button:hover{ color:var(--tt-accent) !important; } /* „Brak w magazynie" — motyw pozycjonuje etykietę absolutnie w oknie obrazka, a że miniatury mają `object-fit:contain`, lądowała raz na zdjęciu, raz w pustym polu. Etykieta idzie na DÓŁ kadru, nie w górny róg: u góry siedzi już plakietka rabatu (`.sale-item.product-label`) i na węższych kaflach obie wpadały sobie na siebie. Rozdzielenie w pionie znosi ten problem raz na zawsze. */ .woocommerce ul.products li.product .woocommerce-image__wrapper{ position:relative; } .woocommerce ul.products li.product .product-out-of-stock{ position:absolute; bottom:10px; left:10px; right:auto; top:auto; z-index:3; /* motyw daje spanowi display:block + 100% szerokosci — stad pasek przez caly kafel; `width:auto` przywraca szerokosc dopasowana do napisu */ display:inline-block; width:auto !important; max-width:none; min-width:0; margin:0; padding:6px 11px; border-radius:3px; background:rgba(8,8,8,.88); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1; text-align:center; white-space:nowrap; } .woocommerce ul.products li.product .product-out-of-stock em{ font-style:normal; } .woocommerce ul.products li.product.outofstock .woocommerce-image__wrapper img{ opacity:.7; } /* Plakietka „Promocja!" zdjęta na życzenie właścicielki — markup usuwa filtr `woocommerce_sale_flash` w functions.php. Reguła zostaje jako zabezpieczenie na wtyczki, które rysują plakietkę własnym kodem (np. YITH). */ .woocommerce span.onsale, .woocommerce .wc-block-grid__product-onsale, .shoptimizer-sale-flash{ display:none !important; } .woocommerce ul.products li.product{ position:relative; } /* pasek wynikow i sortowanie */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select{ font-size:14px; color:var(--tt-body); } /* ------------------------------------------------------------------ Wzmocnienie specyficznosci — style motywu potomnego maja wygrywac z domyslnymi Shoptimizera i z Kirki ------------------------------------------------------------------ */ body.woocommerce-page, body, .site, .site-content{ font-family: var(--tt-font) !important; } body a, .site a{ color: var(--tt-ink); } body a:hover, .site a:hover{ color: var(--tt-accent); } .site h1, .site h2, .site h3, .site h4, .site h5, .site h6, .entry-title, .wp-block-heading, .woocommerce-loop-product__title{ font-family: var(--tt-font) !important; color: var(--tt-ink); font-weight:600; } /* naglowek strony */ .site-header{ background: var(--tt-bg); border-bottom:1px solid var(--tt-line); } .site-header .custom-logo{ max-height:56px; width:auto; } /* menu glowne — wersaliki, drobna spacja */ .main-navigation ul li a, .menu > li > a{ font-family: var(--tt-font); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--tt-ink); } .main-navigation ul li a:hover, .menu > li > a:hover{ color: var(--tt-accent); } /* kontener tresci */ .site-content .col-full, .site-content > .container{ max-width: var(--tt-container); } /* etykiety kategorii nad tytulem wpisu */ .wp-block-post-terms, .post-categories{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tt-body); } .wp-block-post-terms a{ color: var(--tt-body); } .wp-block-post-terms a:hover{ color: var(--tt-accent); } /* "READ MORE" jak w GoodLife — pelna szerokosc, ciemne tlo */ .wp-block-read-more{ display:block; width:100%; text-align:center; padding:14px 0; background: var(--tt-ink); color:#fff !important; text-decoration:none; font-size:13px; letter-spacing:.1em; text-transform:uppercase; } .wp-block-read-more:hover{ background: var(--tt-accent); color:#fff !important; } /* ------------------------------------------------------------------ Ukrycie tytulu strony glownej (hero jest pierwszym ekranem) ------------------------------------------------------------------ */ .home .entry-title{ display:none; } .home .site-content .col-full{ padding-top:0; } /* WP ustawia content-size na 900px, a .entry-content nie obsluguje alignwide — na stronie glownej bloki maja korzystac z pelnej szerokosci kontenera. */ .home .entry-content{ max-width:none; } .home .entry-content > *{ max-width: var(--tt-container) !important; margin-left:auto !important; margin-right:auto !important; } /* ------------------------------------------------------------------ Pasek gorny (top-bar) — rozowy pas z promocja i cookies ------------------------------------------------------------------ */ /* zewnetrzny wrapper ma klase .col-full (max-width) — pas ma isc przez cala szerokosc */ .topbar-wrapper{ margin:0; padding:0; max-width:none !important; width:100%; } .top-bar{ background: var(--tt-accent); font-size:12px; line-height:1; width:100%; } .top-bar .col-full{ max-width: var(--tt-container); display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:10px; padding-bottom:10px; } .top-bar .widget{ margin:0; padding:0; } .site .top-bar a{ color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; } .site .top-bar a:hover{ color:#fff; opacity:.75; } .top-bar .col-full:empty{ display:none; } /* gdy jest tylko lewy widget, wyśrodkuj */ /* Po zdjęciu widgetu z promocją („DUŻE ŚWIĘTO…") na pasku został tylko jeden wpis — wyśrodkowujemy go, żeby nie wisiał samotnie przy prawej krawędzi. Widget WP ma klasy `widget_text`/`widget_custom_html`, ale NIE `widget`, dlatego selektor idzie po `*:only-child`, a nie po `.widget`. Sam `margin:0 auto` nie wystarcza — motyw daje `.top-bar-right` `flex:1; justify-content:flex-end`, więc trzeba nadpisać też wyrównanie. */ .top-bar .col-full > *:only-child{ margin:0 auto; justify-content:center; } /* ------------------------------------------------------------------ HERO — karuzela wyróżnionych wpisów (jak Featured Area GoodLife, wykonana współcześnie: pełne kadry, gradient, kropki, swipe) ------------------------------------------------------------------ */ /* wysokosc hero — jedno zrodlo prawdy */ :root{ --tt-hero-h: clamp(440px, 44vw, 600px); } /* Sekcja renderowana hookiem PRZED .col-full, wiec jest juz pelnej szerokosci — zadnych sztuczek z 100vw i ujemnymi marginesami. */ .tt-hero{ position:relative; height:var(--tt-hero-h); overflow:hidden; background:var(--tt-ink); margin-bottom:44px; } .tt-hero__track{ position:absolute; inset:0; } .tt-hero__slide{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 max(24px, calc((100% - var(--tt-container)) / 2)) 62px; box-sizing:border-box; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s .7s; } .tt-hero__slide.is-active{ opacity:1; visibility:visible; transition:opacity .7s ease; } /* bez JS: pierwszy slajd widoczny, reszta schowana */ .tt-hero:not(.is-ready) .tt-hero__slide{ display:none; } .tt-hero:not(.is-ready) .tt-hero__slide.is-active{ display:flex; opacity:1; visibility:visible; } .tt-hero__img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform 7s linear; } .tt-hero__slide.is-active .tt-hero__img{ transform:scale(1.08); } /* subtelny Ken Burns */ /* przyciemnienie pod tekstem */ .tt-hero__slide::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(to top, rgba(8,8,8,.85) 0%, rgba(8,8,8,.45) 36%, rgba(8,8,8,0) 70%), linear-gradient(to right, rgba(8,8,8,.5) 0%, rgba(8,8,8,0) 58%); pointer-events:none; } .tt-hero__body{ position:relative; z-index:2; max-width:720px; } .tt-hero__kicker{ margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; } .site .tt-hero__kicker a{ color:var(--tt-accent); text-decoration:none; } .site .tt-hero__kicker a:hover{ color:#fff; } .tt-hero__title{ margin:0 0 24px; font-size:clamp(24px, 2.5vw, 40px); line-height:1.18; font-weight:800; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .site .tt-hero__title a{ color:#fff; text-decoration:none; text-shadow:0 2px 18px rgba(0,0,0,.45); } .site .tt-hero__title a:hover{ color:var(--tt-accent); } .site .tt-hero__cta{ display:inline-block; align-self:flex-start; padding:14px 36px; border-radius:999px; background:var(--tt-accent); color:#fff; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.35); transition:background .25s ease, transform .25s ease, color .25s ease; } .site .tt-hero__cta:hover{ background:#fff; color:var(--tt-ink); transform:translateY(-2px); } /* kropki */ .tt-hero__dots{ position:absolute; z-index:5; right:max(24px, calc((100% - var(--tt-container)) / 2)); bottom:30px; display:flex; gap:8px; } .tt-hero__dot{ width:8px; height:8px; padding:0; border:none; border-radius:999px; background:rgba(255,255,255,.55); cursor:pointer; transition:width .3s ease, background .3s ease; } .tt-hero__dot.is-active{ width:26px; background:#fff; } .tt-hero__dot:hover{ background:#fff; } @media (max-width:782px){ :root{ --tt-hero-h: 68vh; } .tt-hero{ max-height:560px; margin-bottom:30px; } .tt-hero__slide{ padding:0 22px 54px; } .tt-hero__dots{ right:22px; bottom:22px; } } /* ------------------------------------------------------------------ Rządek kart z wpisami pod hero (5 kart, napisy na grafice) ------------------------------------------------------------------ */ /* siatka: rowne 5 kolumn, bez zawijania pojedynczej karty do drugiego rzedu */ .tt-cat-row .wp-block-post-template{ display:grid !important; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:22px; list-style:none; margin:0; padding:0; } @media (max-width:1024px){ .tt-cat-row .wp-block-post-template{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width:640px){ .tt-cat-row .wp-block-post-template{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } } .tt-cat-row li.wp-block-post{ position:relative; width:auto !important; max-width:none !important; margin:0; aspect-ratio:3/4; /* rowna wysokosc wszystkich kart */ overflow:hidden; border-radius:8px; background:var(--tt-ink); display:flex; flex-direction:column; justify-content:flex-end; padding:16px; box-sizing:border-box; } .tt-cat-row .wp-block-post-featured-image{ position:absolute; inset:0; margin:0; z-index:0; } .tt-cat-row .wp-block-post-featured-image a, .tt-cat-row .wp-block-post-featured-image img{ width:100%; height:100%; display:block; } .tt-cat-row .wp-block-post-featured-image img{ object-fit:cover; transition:transform .6s ease; } .tt-cat-row li.wp-block-post:hover .wp-block-post-featured-image img{ transform:scale(1.07); } /* przyciemnienie u dolu — pod tekstem, nad zdjeciem */ /* mocniejsze przyciemnienie — rozowa etykieta gubila sie na jasnych zdjeciach */ .tt-cat-row li.wp-block-post::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(8,8,8,.94) 0%, rgba(8,8,8,.78) 26%, rgba(8,8,8,.28) 52%, rgba(8,8,8,0) 78%); pointer-events:none; } /* kategoria i tytul w normalnym przeplywie — nie moga na siebie nachodzic */ .tt-cat-row .wp-block-post-terms, .tt-cat-row .wp-block-post-title{ position:relative; z-index:2; margin:0; } .tt-cat-row .wp-block-post-terms{ margin-bottom:7px; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.3; /* przy wielu kategoriach pokazujemy tylko pierwszy wiersz */ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .tt-cat-row .wp-block-post-terms a{ color:var(--tt-accent) !important; text-decoration:none; } .tt-cat-row .wp-block-post-terms a:hover{ color:#fff !important; } .tt-cat-row .wp-block-post-title{ font-size:14px; line-height:1.34; font-weight:700; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .tt-cat-row .wp-block-post-title a{ color:#fff !important; text-decoration:none; text-shadow:0 1px 10px rgba(0,0,0,.5); } .tt-cat-row .wp-block-post-title a:hover{ color:var(--tt-accent) !important; } /* ------------------------------------------------------------------ Strumień wpisów — jak GoodLife: tytuł, meta (kategoria · data), obrazek, zajawka, przycisk. Do 13.09 strumień siedział w kolumnie 66 % obok bloku „O mnie". Po jego usunięciu dostał pełne 1200 px i jeden wpis zajmował cały ekran (kadr 1180 × 520 px). Stąd siatka dwukolumnowa i kadr 3:2 zamiast `max-height`. ------------------------------------------------------------------ */ .tt-stream .wp-block-post-template{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 34px; list-style:none; margin:0; padding:0; } @media (max-width:782px){ .tt-stream .wp-block-post-template{ grid-template-columns:1fr; } } /* karta: przycisk dosuniety do dolu, zeby rzedy konczyly sie rowno */ .tt-stream .wp-block-post{ display:flex; flex-direction:column; margin:0; } .tt-stream .wp-block-post-title{ margin:0 0 8px; text-align:left; font-size:20px; line-height:1.32; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .tt-stream .wp-block-post-title a{ text-decoration:none; } .tt-stream .wp-block-post-title a:hover{ color:var(--tt-accent); } .tt-stream .tt-entry-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tt-body); } .tt-stream .wp-block-post-terms a{ color:var(--tt-body); text-decoration:none; } .tt-stream .wp-block-post-terms a:hover{ color:var(--tt-accent); } .tt-stream .wp-block-post-date{ color:var(--tt-body); } .tt-stream .wp-block-post-date::before{ content:"·"; margin-right:10px; color:var(--tt-accent); } .tt-stream .wp-block-post-featured-image{ margin:0 0 16px; } /* staly kadr 3:2 — pionowe zdjecia potrafily zajac caly ekran, a rowna proporcja trzyma oba slupki siatki w jednej linii */ .tt-stream .wp-block-post-featured-image img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; border-radius:6px; transition:opacity .3s ease; } .tt-stream .wp-block-post-featured-image a:hover img{ opacity:.92; } /* zajawka do trzech wierszy, zeby przyciski w rzedzie staly rowno */ .tt-stream .wp-block-post-excerpt{ margin:0 0 18px; text-align:left; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .tt-stream .wp-block-post-excerpt__more-text{ display:none; } /* „czytaj więcej" w zajawce zbędne — jest pasek */ .tt-stream .wp-block-read-more{ box-shadow:none; margin-top:auto; } /* paginacja */ .tt-stream .wp-block-query-pagination{ margin:12px 0 88px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; gap:14px; } .tt-stream .wp-block-query-pagination a{ text-decoration:none; } .tt-stream .wp-block-query-pagination-numbers .page-numbers{ padding:4px 10px; border:1px solid var(--tt-line); border-radius:4px; } .tt-stream .wp-block-query-pagination-numbers .page-numbers.current{ background:var(--tt-ink); color:#fff; border-color:var(--tt-ink); } /* ------------------------------------------------------------------ Stopka — różowy pas „ZOSTAŃMY W KONTAKCIE" (sociale + newsletter), ciemny pasek menu, czarny pas widgetowy, copyright. Newsletter był wcześniej osobnym białym pasem pod menu i wraz z pustym miejscem formularza Noptina zajmował ponad 400 px. Teraz siedzi w drugiej kolumnie różowego pasa, a przejścia kolorów są dwa: biała treść → róż → czerń. ------------------------------------------------------------------ */ .tt-footer-connect{ background:var(--tt-accent); color:#fff; } .tt-footer-connect__inner{ max-width:var(--tt-container); margin:0 auto; padding:36px 24px 38px; display:grid; grid-template-columns:1fr 1.1fr; gap:30px 60px; align-items:center; } .tt-footer-connect h2{ margin:0 0 8px; color:#fff; font-size:20px; font-weight:800; letter-spacing:.05em; line-height:1.25; } .tt-footer-connect p{ margin:0 0 16px; color:#fff; opacity:.95; font-size:14px; line-height:1.55; } /* kreska rozdziela kolumny bez dokładania wysokości pasowi */ .tt-footer-connect__newsletter{ border-left:1px solid rgba(255,255,255,.3); padding-left:60px; } @media (max-width:900px){ .tt-footer-connect__inner{ grid-template-columns:1fr; gap:26px; text-align:center; } .tt-footer-connect__newsletter{ border-left:none; border-top:1px solid rgba(255,255,255,.3); padding-left:0; padding-top:26px; } .tt-footer-connect .tt-footer-social{ justify-content:center; } .tt-footer-connect .noptin-form{ margin:0 auto !important; } } .tt-footer-social{ display:flex; justify-content:flex-start; gap:14px; } .tt-footer-social a{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--tt-accent); transition:transform .25s ease, box-shadow .25s ease; } .tt-footer-social a:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.22); color:var(--tt-accent); } .tt-footer-social svg{ width:20px; height:20px; fill:currentColor; } /* pasek menu i czarny pas widgetowy mają to samo tło — hairline pod menu jest jedynym, co je rozdziela; bez niego zlewały się w jedną plamę */ .tt-footer-menu{ background:var(--tt-ink); } .tt-footer-menu ul{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 34px; max-width:var(--tt-container); margin:0 auto; padding:18px 24px; list-style:none; border-bottom:1px solid rgba(255,255,255,.12); } .tt-footer-menu a{ color:#fff; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; } .tt-footer-menu a:hover{ color:var(--tt-accent); } /* formularz NOIB — jeden rząd: pole + przycisk. Wtyczka rysuje szare pudełko przez zmienne --noptin-* ORAZ styl inline `min-height:280px; border-width:4px` na .noptin-optin-form-wrapper. To właśnie te 280 px robiły wielką pustą dziurę pod nagłówkiem — dlatego poniżej `min-height:0` z !important. */ .tt-footer-connect .noptin-optin-main-wrapper, .tt-footer-connect .noptin-optin-form-wrapper{ --noptin-background-color: transparent !important; --noptin-border-color: transparent !important; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; max-width:none !important; min-height:0 !important; } .tt-footer-connect .noptin-form{ width:100%; max-width:520px; background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } .tt-footer-connect .noptin-form-footer{ padding:0 !important; } .tt-footer-connect .noptin-form .noptin-form-fields{ display:flex; gap:10px; } .tt-footer-connect .noptin-form-field-email{ flex:1; } .tt-footer-connect .noptin-form label{ display:none; } /* etykiety w placeholderze */ .tt-footer-connect .noptin-text{ width:100%; height:46px; padding:0 16px; border:1px solid transparent; border-radius:4px; background:#fff; color:var(--tt-ink); font-size:15px; } .tt-footer-connect .noptin-text:focus{ border-color:var(--tt-ink); outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.55); } /* przycisk w kolorze akcentu byłby niewidoczny na różowym pasie — dajemy czerń */ .tt-footer-connect .noptin-form-submit{ height:46px; padding:0 26px !important; border:none !important; border-radius:4px; background:var(--tt-ink) !important; color:#fff !important; font-size:13px !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .25s ease, transform .25s ease; } .tt-footer-connect .noptin-form-submit:hover{ background:#000 !important; transform:translateY(-1px); } .tt-footer-connect .noptin-form-notice{ font-size:13px; margin-top:10px; color:#fff; } .tt-footer-connect .noptin-form-notice a{ color:#fff; text-decoration:underline; } /* na waskim ekranie pole i przycisk jeden pod drugim, oba pelnej szerokosci */ @media (max-width:600px){ .tt-footer-connect .noptin-form .noptin-form-fields{ flex-direction:column; } .tt-footer-connect .noptin-form-submit{ width:100%; } } /* ------------------------------------------------------------------ Dolny czarny pas — stopka widgetowa: O mnie, Produkty, YouTube, Ostatnie wpisy ------------------------------------------------------------------ */ footer.site-footer{ background:var(--tt-ink); color:#c9c9c9; padding:56px 0 44px; } footer.site-footer .col-full{ max-width:var(--tt-container); display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:40px 44px; align-items:start; } @media (max-width:1024px){ footer.site-footer .col-full{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:640px){ footer.site-footer .col-full{ grid-template-columns:1fr; gap:34px; } } footer.site-footer .widget{ margin:0; padding:0; border:none; } footer.site-footer .widget-title, footer.site-footer .widget h2, footer.site-footer .widget h3, footer.site-footer .widget strong{ display:block; margin:0 0 16px; color:#fff; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .site footer.site-footer a{ color:#c9c9c9; text-decoration:none; } .site footer.site-footer a:hover{ color:var(--tt-accent); } footer.site-footer p, footer.site-footer li{ font-size:14px; line-height:1.6; } /* „O MNIE" — blok przeniesiony z paska bocznego wpisów w miejsce chmury kategorii. Układ poziomy (zdjęcie z lewej), bo wersja pionowa z paska bocznego byłaby w tej kolumnie dwa razy wyższa od sąsiednich. */ footer.site-footer .tt-foot-about{ display:flex; gap:16px; align-items:flex-start; } footer.site-footer .tt-foot-about img{ width:100px; height:100px; flex:none; object-fit:cover; border-radius:4px; } footer.site-footer .tt-foot-about p{ margin:0 0 14px; font-size:13px; line-height:1.65; color:#c9c9c9; } .site footer.site-footer .tt-foot-btn{ display:inline-block; padding:11px 18px; line-height:1; border:1px solid rgba(255,255,255,.35); border-radius:3px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; transition:background .2s ease, border-color .2s ease; } .site footer.site-footer .tt-foot-btn:hover{ background:var(--tt-accent); border-color:var(--tt-accent); color:#fff; } @media (max-width:640px){ footer.site-footer .tt-foot-about{ flex-direction:column; } } /* listy widgetow (produkty, ostatnie wpisy) */ footer.site-footer ul{ list-style:none; margin:0; padding:0; } footer.site-footer ul li{ padding:0 0 12px; margin:0 0 12px; border-bottom:1px solid rgba(255,255,255,.08); } footer.site-footer ul li:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; } /* produkt: miniatura obok, tytul i cena jeden pod drugim */ footer.site-footer .product_list_widget li{ display:block; } footer.site-footer .product_list_widget li > a{ display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center; margin-bottom:6px; } footer.site-footer .product_list_widget li img{ width:56px; height:56px; object-fit:cover; border-radius:4px; float:none; margin:0; grid-column:1; } footer.site-footer .product_list_widget li .product-title{ display:block; color:#e6e6e6; font-size:13px; line-height:1.4; } /* wciecie tylko na bezposrednich dzieciach
  • , inaczej cena promocyjna (del + ins) dostawala je dwa razy i uciekala w prawo */ footer.site-footer .product_list_widget li > .amount, footer.site-footer .product_list_widget li > del, footer.site-footer .product_list_widget li > ins, footer.site-footer .product_list_widget li > .price{ padding-left:68px; font-size:13px; } footer.site-footer .product_list_widget li > ins{ text-decoration:none; padding-left:8px; } footer.site-footer .product_list_widget li > del{ opacity:.75; } footer.site-footer .product_list_widget .woocommerce-Price-amount{ color:var(--tt-accent); font-weight:600; } footer.site-footer del .woocommerce-Price-amount{ color:#8d8d8d; font-weight:400; } /* film z YouTube — proporcja 16:9 */ .tt-footer-video{ position:relative; aspect-ratio:16/9; width:100%; } .tt-footer-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:6px; } /* Reguły dawnej kolumny „Informacje" (linki prawne jeden pod drugim) usunięte razem z tym widgetem. `padding:3px 0` na KAŻDYM linku w `.widget_custom_html` miało wyższą specyficzność niż `.tt-foot-btn` i spłaszczało przycisk „Więcej o mnie" do 19 px — jeśli kiedyś wróci, scop ją do tamtego widgetu. */ /* pasek copyright — wysrodkowany, stonowany */ footer.copyright{ background:var(--tt-ink); border-top:1px solid rgba(255,255,255,.08); } footer.copyright .col-full{ text-align:center; } /* motyw dosuwa widget copyright do prawej — prostujemy */ footer.copyright .widget, footer.copyright .textwidget{ text-align:center; float:none; width:100%; } footer.copyright .widget{ margin:0; padding:18px 0; } footer.copyright, footer.copyright p{ color:#b9b9b9; font-size:13px; } /* ------------------------------------------------------------------ Tytuł sekcji z liniami po bokach (jak na produkcji) ------------------------------------------------------------------ */ /* kreski maja przylegac do napisu, nie do krawedzi kontenera */ .tt-section-title{ display:flex; align-items:center; justify-content:center; gap:18px; font-size:16px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:18px 0 8px; } .tt-section-title::before, .tt-section-title::after{ content:""; width:46px; height:2px; flex:none; background:var(--tt-accent); } /* kolka spolecznosciowe — rozmiar wynika z paddingu + ikony, bez narzucania width/height na
  • (kolidowalo z ukladem core) */ .wp-block-social-links .wp-social-link{ background-color:var(--tt-ink) !important; border-radius:9999px; margin:0 6px 0 0; transition:background-color .25s ease, transform .25s ease; } .wp-block-social-links .wp-social-link:hover{ background-color:var(--tt-accent) !important; transform:translateY(-2px); } /* ikona dziedziczy kolor z (svg ma fill:currentColor) */ .wp-block-social-links .wp-social-link a, .wp-block-social-links .wp-social-link a:hover{ display:block; padding:11px; line-height:0; color:#fff !important; } .wp-block-social-links .wp-social-link svg{ width:20px !important; height:20px !important; fill:currentColor !important; display:block; } /* pasek boczny: naglowek "O mnie" jak na produkcji */ .wp-block-column .wp-block-heading{ font-size:14px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; } /* ------------------------------------------------------------------ Wpisy i archiwa bez paska bocznego Pasek boczny wyłączony w ustawieniach motywu: shoptimizer_layout_post_sidebar = no-post-sidebar shoptimizer_layout_archives_sidebar = no-archives-sidebar Style `.tt-side-*` (kółka społecznościowe, blok „O mnie") zniknęły razem z nim — „O mnie" jest teraz w stopce jako `.tt-foot-about`. Motyw ma regułę na pełną szerokość tylko dla archiwów (`.archive.no-archives-sidebar .content-area{width:100%}`), dla wpisów jej NIE MA — bez poniższego kolumna zostaje na ~71 % i po prawej zieje pustka. Reszta klas poniżej to ten sam problem w innych widokach. Motyw dokłada do `` klasę `no-*-sidebar`, gdy dana opcja jest ustawiona na „None", ale regułę szerokości pisze tylko dla części z nich. Wyniki wyszukiwania nie mają własnej klasy — tam idzie po prostu `.search`. ------------------------------------------------------------------ */ .single-post.no-post-sidebar .content-area, .single.no-post-sidebar .content-area, .no-page-sidebar .content-area, .no-archives-sidebar .content-area, .no-woocommerce-sidebar .content-area, body.search .content-area{ width:100%; float:none; } /* ------------------------------------------------------------------ Archiwa kategorii i bloga — rowne kafle zamiast schodkow ------------------------------------------------------------------ */ /* UWAGA: `.shoptimizer-archive` opakowuje tresc KAZDEJ strony (jest w header.php), wiec siatka moze isc wylacznie na `.site-main` archiwow wpisow — inaczej rozbija na dwie kolumny takze sklep i podstrony. */ /* Wyników wyszukiwania NIE wciągamy do tej siatki. Motyw ma dla nich własny układ „mała miniatura z lewej, tekst z prawej" i generuje tylko kadry 80 × 75 px — w kaflu wyglądałyby jak znaczki pocztowe. */ body.blog .site-main, body.category .site-main, body.tag .site-main, body.author .site-main, body.date .site-main{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px 34px; align-items:start; } /* Liczbę kolumn archiwum ustawia MOTYW, klasami na `.site-main`: `shoptimizer_layout_blog = "grid grid-3"` (było `grid grid-2`). Trzy kolumny, odkąd archiwa idą na pełne 1200 px bez paska bocznego — przy dwóch kadry rosły do ~580 px i zdjęcie przytłaczało tytuł z zajawką. Motyw sam schodzi do jednej kolumny poniżej 769 px. Nie nadpisuj tu liczby kolumn własnym progiem. Motyw przypina nagłówek archiwum i paginację na sztywno `grid-column:span 3`; przy dwóch kolumnach ten span dokłada trzecią, niejawną kolumnę, obie jawne kolapsują do 0 px i cała siatka ląduje w jednym słupku. Zmieniaj liczbę kolumn opcją motywu. */ @media (max-width:782px){ body.blog .site-main, body.category .site-main, body.tag .site-main, body.author .site-main, body.date .site-main{ grid-template-columns:1fr; gap:34px; } } .site-main > article{ display:flex; flex-direction:column; margin:0 !important; padding:0 !important; border:none !important; width:auto !important; float:none !important; } /* jednakowy kadr zdjecia — pionowe zdjecia rozpychaly wiersze */ .site-main > article .post-thumbnail{ display:block; margin:0 0 18px; overflow:hidden; border-radius:6px; } .site-main > article .post-thumbnail img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .6s ease; } .site-main > article .post-thumbnail:hover img{ transform:scale(1.04); } /* wpisy bez miniatury zostawialy dziure w siatce — dostaja zastepczy kadr o tej samej proporcji, wiec tytuly w rzedzie zaczynaja sie rowno */ .site-main > article:not(:has(.post-thumbnail)) .blog-loop-content-wrapper::before{ content:""; display:block; aspect-ratio:3/2; margin-bottom:18px; border-radius:6px; background: radial-gradient(circle at 30% 30%, rgba(248,96,163,.16), transparent 60%), linear-gradient(135deg, #f6f6f6 0%, #ededed 100%); } .site-main > article .entry-header{ margin:0 0 10px; padding:0; } .site-main > article .entry-title{ font-size:20px; line-height:1.32; font-weight:700; margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .site-main > article .entry-title a{ text-decoration:none; } .site-main > article .entry-title a:hover{ color:var(--tt-accent); } /* pusta data (wtyczka usuwa meta) zostawiala dziure */ .site-main > article .posted-on:empty, .site-main > article .entry-meta:empty{ display:none; } .site-main > article .entry-content{ margin:0; } .site-main > article .entry-content p{ font-size:15px; line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* naglowek archiwum i paginacja na pelna szerokosc siatki */ .site-main > .navigation, .site-main > nav, .site-main > .archive-header, .site-main > header{ grid-column:1 / -1; } /* ------------------------------------------------------------------ Paginacja — czytelne kwadraty zamiast drobnych cyfr ------------------------------------------------------------------ */ /* dolny margines musi być spory — zaraz pod paginacją zaczyna się różowy pas stopki i przy 10 px numery na niego najeżdżały */ .navigation.pagination{ margin:46px 0 72px; background:none !important; border:none !important; padding:0 !important; } .navigation.pagination .nav-links{ display:flex; justify-content:center; background:none !important; border:none !important; padding:0 !important; } /* UWAGA: `