/* ═══════════════════════════════════════════════════════════════ Motyw Xerall — arkusz główny Kolejność: tokeny → warianty → podstawy → układ → części → sklep → responsywność Domyślny wariant: jasny. Ciemny włącza odwiedzający przyciskiem w nagłówku. ═══════════════════════════════════════════════════════════════ */ :root{ /* promienie — skala przeniesiona z beccarii */ --r-xs:6px; --r-sm:9px; --r-md:14px; --r-lg:18px; --r-pill:999px; /* kolory stałe niezależnie od wariantu */ --accent:#FF6E00; --btn-ink:#0A0E14; /* wariant JASNY (domyślny) */ --bg:#FFFFFF; --accent-txt:#B84A00; --ink:#0A0E14; --ink-2:#46505F; --ink-3:#5B6472; --line:rgba(10,14,20,.10); --line-2:rgba(10,14,20,.18); --panel:#F5F6F8; --tile:#F0F2F5; --glow-1:rgba(255,110,0,.10); --glow-2:rgba(255,110,0,.05); --pasek-szklo:rgba(255,255,255,.72); --pasek-solid:rgba(255,255,255,.94); --udost-bg:rgba(255,255,255,.92); --udost-line:rgba(10,14,20,.12); --profil-tlo:#FFFFFF; /* kafelki social w stopce — pełne krycie */ --poswiata:rgba(10,14,20,.22); /* jasny motyw: cień szary, nie pomarańczowy */ --poswiata-mocna:rgba(10,14,20,.28); --cien-paska:0 6px 22px rgba(10,14,20,.10); --cien-przycisku:0 8px 20px rgba(10,14,20,.18); --postep:#0B69C7; /* jasny motyw: niebieski */ --link-prawny:#0B69C7; --cien-karty:0 10px 30px rgba(10,14,20,.09); --wrap:1280px; --pad:40px; --naglowkowy:"Bai Jamjuree","Segoe UI",system-ui,sans-serif; --nawigacyjny:"Saira Condensed","Arial Narrow",sans-serif; --tekstowy:"Archivo","Segoe UI",system-ui,sans-serif; --monospace:"IBM Plex Mono",Consolas,monospace; } html[data-wariant="ciemny"]{ --bg:#0A0E14; --accent-txt:#FF6E00; --ink:#EEF1F5; --ink-2:#B7BDC9; --ink-3:#8891A0; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16); --panel:rgba(14,17,22,.55); --tile:#FFFFFF; --glow-1:rgba(255,110,0,.12); --glow-2:rgba(255,110,0,.06); --pasek-szklo:rgba(10,14,20,.72); --pasek-solid:rgba(10,14,20,.94); --udost-bg:rgba(14,17,22,.85); --udost-line:rgba(255,255,255,.10); --profil-tlo:#141922; --poswiata:rgba(255,110,0,.45); /* ciemny motyw: poświata w kolorze marki */ --poswiata-mocna:rgba(255,110,0,.55); --cien-paska:0 6px 26px rgba(0,0,0,.45); --cien-przycisku:0 8px 22px rgba(255,110,0,.35); --postep:#FFFFFF; /* ciemny motyw: biały */ --link-prawny:#8EC5F0; --cien-karty:none; } /* ── podstawy ───────────────────────────────────────────────── */ *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip} body{ margin:0;color:var(--ink);font-family:var(--tekstowy);font-weight:400;line-height:1.7; -webkit-font-smoothing:antialiased;overflow-x:clip; background: radial-gradient(1100px 720px at 80% 20%, var(--glow-1), transparent 55%), radial-gradient(900px 640px at 12% 88%, var(--glow-2), transparent 55%), var(--bg); background-attachment:fixed; } a{color:inherit;text-decoration:none} a:hover{color:var(--accent-txt)} ::selection{background:var(--accent);color:#fff} img{max-width:100%;height:auto;display:block} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} h1,h2,h3,h4{font-family:var(--naglowkowy);margin:0} h1{font-weight:300;font-size:clamp(30px,5.4vw,84px);letter-spacing:-.02em;line-height:1.0;text-wrap:balance} h2{font-weight:300;font-size:clamp(28px,4.2vw,58px);letter-spacing:.02em;line-height:1.06} h3{font-weight:600;font-size:19px;line-height:1.25} h1 .b,h2 .b{font-weight:600} .b .ostatnie{white-space:nowrap} .b .ostatnie::after{content:"";display:inline-block;width:.15em;height:.15em;border-radius:50%; background:var(--accent);vertical-align:baseline;margin-left:.10em;line-height:0} p{margin:0 0 1em;color:var(--ink-2)} p:last-child{margin-bottom:0} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .wrap.waski{max-width:820px} .wrap.srodek{text-align:center} .sekcja{position:relative;padding:104px 0;border-top:1px solid var(--line)} .sekcja:first-child{border-top:0} .tresc-glowna{display:block} .kick{display:flex;align-items:center;gap:12px;margin-bottom:16px; font-family:var(--monospace);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-txt)} .kick::before{content:"";width:34px;height:1px;background:var(--accent);display:inline-block;flex:none} .wrap.srodek .kick{justify-content:center} .pomin-do-tresci{position:absolute;left:-9999px;top:0;z-index:1000;padding:12px 20px; background:var(--accent);color:var(--btn-ink);border-radius:0 0 var(--r-sm) 0} .pomin-do-tresci:focus{left:0} /* ── pasek nawigacji ────────────────────────────────────────── */ .pasek{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center; justify-content:space-between;gap:20px;padding:0 var(--pad);height:68px; /* matowe szkło — w obu wariantach i niezależnie od przewinięcia */ background:var(--pasek-szklo); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid var(--line); box-shadow:var(--cien-paska); transition:background .25s,box-shadow .25s} .pasek.przyklejony{background:var(--pasek-solid)} /* Przeglądarki bez rozmycia tła dostają pełniejsze wypełnienie, żeby tekst był czytelny. */ @supports not (backdrop-filter: blur(1px)){ .pasek{background:var(--pasek-solid)} } .marka{display:flex;align-items:center} .marka{display:flex;align-items:center;height:100%;flex:none} .marka a,.marka .custom-logo-link{display:flex;align-items:center;line-height:0; transform-origin:left center;transition:transform .3s cubic-bezier(.16,1,.3,1)} /* Ten sam efekt „grow 10%" co na linkach w menu i ikonach social. */ .marka a:hover,.marka .custom-logo-link:hover{transform:scale(1.1)} @media (prefers-reduced-motion:reduce){ .marka a,.marka .custom-logo-link{transition:none} .marka a:hover,.marka .custom-logo-link:hover{transform:none} } .marka img,.marka .custom-logo{height:30px!important;width:auto!important;max-width:230px;object-fit:contain; display:block;transition:filter .25s} /* Logo to biały sygnet. Pasek jest teraz zawsze matowym szkłem — w wariancie jasnym jaśniejszym niż logo, więc odwracamy je na ciemne na stałe. W ciemnym zostaje białe. */ html[data-wariant="jasny"] .marka img{filter:invert(1) brightness(.12)} /* Logo zostaje w oryginalnych barwach — niebieski Xerall czyta się i na jasnym, i na ciemnym tle. Żadnych filtrów: wyblakłyby markę. */ @media (max-width:600px){ .marka img,.marka .custom-logo{height:28px;max-width:170px} } .marka-tekst{font-family:var(--nawigacyjny);font-weight:800;font-size:22px;letter-spacing:.18em} /* Menu idzie tym samym krojem co nagłówki sekcji (Bai Jamjuree), nie wąskim Saira Condensed. Bai jest szerszy, więc lekko ścieśniamy odstępy między literami i między pozycjami, żeby rząd nadal mieścił się w jednej linii. */ .pasek .menu{display:flex;gap:26px;margin:0;padding:0;list-style:none; font-family:var(--naglowkowy);font-weight:600;font-size:14px;letter-spacing:.11em;text-transform:uppercase} .pasek .menu a{color:var(--ink-3);transition:color .18s ease} .pasek .menu a:hover,.pasek .menu .current-menu-item>a{color:var(--accent-txt)} .pasek-prawy{display:flex;align-items:center;gap:12px} .przelacznik-wariantu{display:flex;align-items:center;gap:7px;padding:6px 11px;cursor:pointer; font-family:var(--monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);transition:.2s} .przelacznik-wariantu:hover{color:var(--accent-txt);border-color:var(--accent)} .koszyk{display:flex;align-items:center;gap:6px;font-family:var(--monospace);font-size:12px;color:var(--ink-2)} .jezyki{display:flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden} .jezyki b,.jezyki a{padding:6px 11px;font-family:var(--monospace);font-size:12px;font-weight:500} .jezyki b{background:var(--accent);color:var(--btn-ink)} .jezyki a{color:var(--ink-3)} .menu-mobilne-przycisk{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px; width:44px;height:38px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;padding:0} .menu-mobilne-przycisk span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s} .menu-mobilne-przycisk[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-mobilne-przycisk[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-mobilne-przycisk[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .menu-mobilne{position:fixed;inset:68px 0 0;z-index:99;background:var(--pasek-solid); backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:40px 24px;overflow:auto} .menu-mobilne[hidden]{display:none} .menu-mobilne-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;text-align:center} .menu-mobilne-lista a{display:block;padding:12px 24px;font-family:var(--naglowkowy);font-weight:700; font-size:28px;letter-spacing:.06em;text-transform:uppercase} /* Pasek postępu czytania — cienka kreska pod paskiem nawigacji, jak w beccarii. Wcześniej siedział na samej górze okna i ginął pod belką przeglądarki. */ /* Pasek postępu leży DOKŁADNIE na dolnej kresce paska nawigacji (68px - 1px obramowania), żeby nie powstawała podwójna linia: kreska + pasek. */ .postep{position:fixed;top:67px;left:0;right:0;height:1px;z-index:101;pointer-events:none} .postep span{display:block;height:100%;width:0;background:var(--postep);transition:width .1s linear} body.admin-bar .postep{top:99px} @media screen and (max-width:782px){ body.admin-bar .postep{top:113px} } /* ── hero ───────────────────────────────────────────────────── */ .hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:#0A0E14} .hero-media{position:absolute;inset:0;overflow:hidden} .hero-plakat{position:absolute;inset:0;background-size:cover;background-position:center} /* Wideo ma wypełniać hero bez czarnych pasów — to jest poprawny wzór „cover" dla 16:9: szerokość liczona z wysokości okna, wysokość z szerokości, a minimum pilnuje, żeby przy każdych proporcjach okna klatka zawsze przykryła całość. */ .hero-media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;border:0;pointer-events:none} /* Zasłona nad wideo. Musi zrobić dwie rzeczy naraz: dać tekstowi czytelne tło po lewej i NIE gasić filmu po prawej. Wcześniej była za mocna — film wyglądał na przyciemniony. Lewa strona trzyma kontrast dla nagłówka, prawa jest niemal przezroczysta. */ .hero-zaslona{position:absolute;inset:0;z-index:2;background: linear-gradient(90deg,rgba(7,10,15,.88) 0%,rgba(7,10,15,.58) 30%,rgba(7,10,15,.14) 58%,rgba(7,10,15,0) 78%), linear-gradient(rgba(10,14,20,.26) 0%,rgba(10,14,20,.04) 34%,rgba(10,14,20,.82) 100%)} html[data-wariant="jasny"] .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:4; pointer-events:none;background:linear-gradient(rgba(255,255,255,0),var(--bg))} .hero-tresc{position:relative;z-index:5;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 96px} .hero-tresc .pudelko{max-width:820px} .hero .kick{color:#FF8A33} .hero h1{color:#EEF1F5} .hero .lead{margin-top:22px;max-width:560px;font-size:18px;color:#C7CDD8} /* ── przyciski ──────────────────────────────────────────────── */ .btn:not(.wp-block-button),.woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce #respond input#submit{ display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px; font-family:var(--nawigacyjny);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase; background:var(--accent);color:#FFFFFF;border:1px solid var(--accent);border-radius:var(--r-sm); cursor:pointer;line-height:1.2;transform-origin:center;will-change:transform,filter; transition:transform 1s cubic-bezier(.16,1,.3,1),filter .45s ease,background .25s,border-color .25s,color .25s} .btn:not(.wp-block-button):hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover, .woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{ /* Napis zostaje biały także pod kursorem — zmienia się tylko skala, jasność i cień. */ transform:scale(1.05);filter:brightness(1.10);background:var(--accent);color:#FFFFFF; box-shadow:var(--cien-przycisku)} .btn-s:not(.wp-block-button){background-color:rgba(255,255,255,.65);color:inherit; border:1px solid var(--line-2);border-bottom:2px solid var(--accent);backdrop-filter:blur(8px)} html[data-wariant="ciemny"] .btn-s:not(.wp-block-button){background-color:rgba(10,14,20,.22)} .hero .btn-s{color:#EEF1F5;background-color:rgba(10,14,20,.28)} .btn-s:not(.wp-block-button):hover{color:var(--accent-txt)} .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} /* ── karty i siatki ─────────────────────────────────────────── */ .karty{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .karta{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:.25s} .karta:hover{border-color:rgba(255,110,0,.6);transform:translateY(-4px);box-shadow:var(--cien-karty)} .karta-tresc{padding:30px} .karta .n{font-family:var(--monospace);font-size:12px;letter-spacing:.24em;color:var(--accent-txt);margin-bottom:14px} .lista-wpisow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px} .podpowiedz{padding:26px 30px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--panel)} .tresc-edytora{font-size:17px} .tresc-edytora h2,.tresc-edytora h3{margin:1.6em 0 .5em} .tresc-edytora ul,.tresc-edytora ol{color:var(--ink-2);padding-left:1.3em} .tresc-edytora img{border-radius:var(--r-lg)} .tytul-strony{margin-bottom:.4em} .miniatura-wpisu img{border-radius:var(--r-lg);margin:32px 0} /* ── odsłanianie przy przewijaniu ───────────────────────────── */ [data-odsloniecie]{opacity:0;transform:translateY(22px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} [data-odsloniecie].widoczne{opacity:1;transform:none} /* ── pasek udostępniania ────────────────────────────────────── */ .udostepnij{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:90; display:flex;flex-direction:column;gap:10px} .udostepnij a{width:40px;height:40px;display:flex;align-items:center;justify-content:center; color:var(--ink-3);background:var(--udost-bg);border:1px solid var(--udost-line); border-radius:var(--r-md);backdrop-filter:blur(4px);transform-origin:center;transition:.2s; animation:falaUdostepniania 3s ease-in-out infinite} .udostepnij a:nth-child(2){animation-delay:.15s} .udostepnij a:nth-child(3){animation-delay:.30s} .udostepnij a:nth-child(4){animation-delay:.45s} .udostepnij a:nth-child(5){animation-delay:.60s} .udostepnij a:hover,.udostepnij a:focus-visible{color:var(--btn-ink);background:var(--accent); border-color:var(--accent);transform:translateX(-3px) scale(1.1); box-shadow:0 0 20px 3px var(--poswiata-mocna);animation:none} @keyframes falaUdostepniania{ 0% {transform:scale(1); border-color:var(--udost-line); box-shadow:0 0 0 0 transparent} 10% {transform:scale(1.08); border-color:var(--accent); box-shadow:0 0 16px 2px var(--poswiata),0 0 4px var(--poswiata-mocna)} 28% {transform:scale(1); border-color:var(--udost-line); box-shadow:0 0 0 0 transparent} 100%{transform:scale(1); border-color:var(--udost-line); box-shadow:0 0 0 0 transparent} } /* ── stopka ─────────────────────────────────────────────────── */ /* Stopka — wariant A: delikatne tło z ciepłym rozświetleniem, znak wodny z logo wyśrodkowany na obszarze kolumn, blok prawny pod kreską. */ .stopka{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:0 0 36px; background: radial-gradient(820px 320px at 12% 0%, var(--glow-2), transparent 62%), var(--panel)} /* Odstęp nad poziomą kreską ma być taki sam jak pod nią — wcześniej górny był czterokrotnie większy i blok prawny wyglądał na oderwany od stopki. */ .stopka-gorna{position:relative;padding:80px 0 0} /* Znak wodny: to samo logo co w nagłówku, wtopione w tło. Nie klikalne, nie czytane przez czytniki ekranu, nie wpływa na układ. */ .stopka-znak-wodny{position:absolute;inset:0;z-index:1;pointer-events:none;user-select:none; display:flex;align-items:center;justify-content:center} /* Znak wodny ma czytelnie obejmować całą szerokość stopki. Gdy był węższy, przy trzech kolumnach jego prawy koniec wystawał w pustą przestrzeń obok ikon i wyglądał jak przypadkowy szary prostokąt, a nie jak logo. */ .stopka-znak-wodny img{width:min(88%,1120px);height:auto;max-width:none} html[data-wariant="jasny"] .stopka-znak-wodny img{filter:invert(1) brightness(0);opacity:.04} html[data-wariant="ciemny"] .stopka-znak-wodny img{opacity:.045} @media (max-width:640px){ .stopka-znak-wodny img{width:96%} } .kolumny-stopki{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px} .kolumna-marki .stopka-logo{display:inline-block;line-height:0;margin-bottom:16px} .kolumna-marki .stopka-logo img{height:32px;width:auto;max-width:230px;object-fit:contain} html[data-wariant="jasny"] .kolumna-marki .stopka-logo img{filter:invert(1) brightness(.12)} .kolumna-marki p{max-width:34ch;margin-bottom:20px} .kolumna-newsletter .newsletter-opis{font-size:13px;color:var(--ink-3);margin:-6px 0 14px} .stopka address{font-style:normal} .blok-prawny{position:relative;z-index:2} .tytul-kolumny{font-family:var(--naglowkowy);font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px} .kolumny-stopki ul{list-style:none;margin:0;padding:0} .kolumny-stopki a,.kolumny-stopki p{font-size:14px;color:var(--ink-3);line-height:1.95} .profile{display:flex;gap:10px;margin-top:2px} /* Znak zawsze idealnie na środku kafelka — bez tego przeglądarka potrafi dosunąć go do linii bazowej tekstu. */ .profile svg,.udostepnij svg{display:block;width:19px;height:19px;flex:none} /* Kafelki stoją równo i nieruchomo. Wcześniej chodziła po nich pulsująca „fala" (animacja falaUdostepniania z opóźnieniem na każdej ikonie) — każda ikona miała w danej chwili inną skalę, więc rząd wyglądał na rozjechany. Ruch zostaje tylko pod kursorem, tak jak na linkach: powiększenie o 10%. */ /* Dokładnie ten sam kafelek co w pasku udostępniania po prawej stronie ekranu: 40×40, to samo zaokrąglenie, to samo tło, obramowanie, rozmycie i zachowanie pod kursorem. Różnica jest jedna i celowa — tutaj nic nie pulsuje. Pulsowanie w pasku bocznym zachęca do kliknięcia; w stopce sprawiało, że rząd czterech ikon wyglądał na rozjechany, bo każda była w innej fazie animacji. */ /* Tło MUSI być nieprzezroczyste. Pasek udostępniania po prawej pływa nad treścią, więc tam półprzezroczystość z rozmyciem ma sens. W stopce pod kafelkami przechodzi szary znak wodny — przy tle 92% białego każdy kafelek łapał inną ilość szarości i rząd czterech ikon wyglądał na rozjechany, mimo że wszystkie mają identyczne wymiary. Stąd pełne krycie i brak rozmycia tła: nie ma czego rozmywać, a jest co przykryć. */ .profile a{width:40px;height:40px;display:flex;align-items:center;justify-content:center; color:var(--ink-3);background:var(--profil-tlo);border:1px solid var(--udost-line); border-radius:var(--r-md); transform-origin:center;transition:transform .25s cubic-bezier(.16,1,.3,1), color .2s,background .2s,border-color .2s,box-shadow .2s} .profile a:hover,.profile a:focus-visible{color:var(--btn-ink);background:var(--accent); border-color:var(--accent);box-shadow:0 0 20px 3px var(--poswiata-mocna)} .blok-prawny{margin-top:28px;padding-top:28px;border-top:1px solid var(--line); text-align:center;font-size:13px;color:var(--ink-3);line-height:1.95} .blok-prawny p{color:inherit} .linki-prawne ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:8px 0;padding:0} .linki-prawne a{color:var(--link-prawny)} .blok-prawny .nota{margin-top:10px;font-family:var(--monospace);font-size:12px} /* ── WooCommerce ────────────────────────────────────────────── */ .xerall-sklep-tresc{padding:120px 0 96px} .naglowek-archiwum{max-width:var(--wrap);margin:0 auto 40px;padding:0 var(--pad)} .tytul-archiwum{font-weight:300;font-size:clamp(28px,4.2vw,58px)} .woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important; border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);overflow:hidden; display:flex;flex-direction:column;transition:.25s;text-align:left} .woocommerce ul.products li.product:hover{border-color:rgba(255,110,0,.6);transform:translateY(-4px);box-shadow:var(--cien-karty)} .woocommerce ul.products li.product a img{margin:0;background:var(--tile);aspect-ratio:1;object-fit:cover;border-radius:0} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--naglowkowy);font-weight:600;font-size:18px;padding:20px 22px 0;margin:0} .woocommerce ul.products li.product .price{display:block;padding:8px 22px 0;margin:0; font-family:var(--monospace);font-size:17px;color:var(--accent-txt);font-weight:600} .woocommerce ul.products li.product .price del{color:var(--ink-3);font-size:14px;font-weight:400;margin-right:8px} .woocommerce ul.products li.product .price ins{text-decoration:none} .woocommerce ul.products li.product .button{margin:16px 22px 22px;width:calc(100% - 44px)} .woocommerce span.onsale{position:absolute;top:14px;left:14px;background:transparent;color:#FFA052; border:1px solid rgba(255,110,0,.5);border-radius:var(--r-xs);padding:4px 10px; font-family:var(--monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase; min-width:0;min-height:0;line-height:1.4} .woocommerce ul.products li.product{position:relative} .woocommerce div.product .product_title{font-family:var(--naglowkowy);font-weight:300;font-size:clamp(28px,3.4vw,46px)} .woocommerce div.product p.price,.woocommerce div.product span.price{ font-family:var(--monospace);color:var(--accent-txt);font-size:26px;font-weight:600} .woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:var(--r-sm) var(--r-sm) 0 0} .woocommerce div.product div.images img{border-radius:var(--r-md)} .woocommerce .quantity .qty{border:1px solid var(--line-2);border-radius:var(--r-sm); background:transparent;color:var(--ink);padding:12px 8px} .woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--accent); border-radius:var(--r-sm);background:var(--panel);color:var(--ink-2)} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea, .woocommerce form .form-row select,.select2-container--default .select2-selection--single{ border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);padding:12px 14px} .woocommerce table.shop_table{border-radius:var(--r-md);border-color:var(--line)} .woocommerce-cart .cart-collaterals .cart_totals,.woocommerce-checkout #order_review{ border:1px solid var(--line);border-radius:var(--r-md);padding:22px;background:var(--panel)} .woocommerce nav.woocommerce-pagination ul{border-radius:var(--r-sm);border-color:var(--line)} /* ── responsywność ──────────────────────────────────────────── */ @media (max-width:1024px){ :root{--pad:24px} .pasek .menu{display:none} .menu-mobilne-przycisk{display:flex} .sekcja{padding:72px 0} .karty,.lista-wpisow,.kolumny-stopki,.woocommerce ul.products{grid-template-columns:1fr} .hero-tresc{padding-bottom:64px} .xerall-sklep-tresc{padding:100px 0 72px} } @media (min-width:641px) and (max-width:1024px){ .karty,.lista-wpisow,.kolumny-stopki,.woocommerce ul.products{grid-template-columns:repeat(2,1fr)} } @media (max-width:820px){ .udostepnij{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%);flex-direction:row; background:var(--pasek-solid);padding:8px 10px;gap:8px;border-top:1px solid var(--line)} .udostepnij a{width:36px;height:36px} body{padding-bottom:56px} } @media (prefers-reduced-motion:reduce){ .udostepnij a,.profile a{animation:none!important} [data-odsloniecie]{opacity:1!important;transform:none!important} *{transition-duration:.01ms!important;scroll-behavior:auto!important} } /* okruszki */ .okruchy{max-width:var(--wrap);margin:0 auto 10px;padding:0 var(--pad); font-family:var(--monospace);font-size:12px;letter-spacing:.06em;color:var(--ink-3)} .okruchy a{color:var(--ink-3)} .okruchy a:hover{color:var(--accent-txt)} .okruch-sep{opacity:.5;margin:0 4px} /* pasek sortowania i licznik wyników */ .woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{ font-family:var(--monospace);font-size:13px;color:var(--ink-3);margin-bottom:24px} .woocommerce .woocommerce-ordering select{border:1px solid var(--line-2);border-radius:var(--r-sm); background:var(--bg);color:var(--ink);padding:8px 12px;font-family:var(--tekstowy)} /* ── karta produktu: drobne poprawki po testach ──────────────── */ .woocommerce div.product p.price ins,.woocommerce ul.products li.product .price ins{ text-decoration:none;background:transparent;color:var(--accent-txt);font-weight:600} .woocommerce div.product p.price del,.woocommerce ul.products li.product .price del{ text-decoration:line-through;opacity:.75} .woocommerce div.product .woocommerce-tabs .panel > h2, .woocommerce div.product .woocommerce-tabs h2{font-size:22px;font-weight:600;margin-bottom:.6em} .woocommerce div.product .woocommerce-tabs ul.tabs{padding-left:0;margin-bottom:28px} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:var(--line)} .woocommerce div.product .woocommerce-tabs ul.tabs li{ background:var(--panel);border-color:var(--line);font-family:var(--nawigacyjny); font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--bg);border-bottom-color:var(--bg)} .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--ink-2);padding:12px 18px} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)} .woocommerce div.product form.cart{margin-top:22px} .woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-2);margin-bottom:6px} .woocommerce div.product div.summary{padding-left:8px} .woocommerce-product-gallery__image{background:var(--tile);border-radius:var(--r-md)} /* ── wzorce bloków: dopasowanie znaczników edytora do wyglądu motywu ── */ .wp-block-group.sekcja{padding:104px 0;border-top:1px solid var(--line);position:relative} .wp-block-group.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .tresc-edytora > .wp-block-group.sekcja:first-child{border-top:0} .wp-block-columns.dwie-kolumny{gap:72px;align-items:flex-start;margin-bottom:0} .wp-block-columns.dwie-kolumny.are-vertically-aligned-center{align-items:center} .wp-block-columns.karty{gap:20px;margin-top:48px} .wp-block-column.karta{background:var(--panel);border:1px solid var(--line); border-radius:var(--r-md);overflow:hidden;transition:.25s} .wp-block-column.karta:hover{border-color:rgba(255,110,0,.6);transform:translateY(-4px);box-shadow:var(--cien-karty)} .wp-block-column.karta .karta-tresc{padding:32px 30px} .wp-block-column.karta .n{font-family:var(--monospace);font-size:12px;letter-spacing:.24em; color:var(--accent-txt);margin-bottom:14px} .wp-block-column.karta h3{margin-bottom:10px} .wp-block-column.karta p{font-size:15px;color:var(--ink-3)} .sekcja.pasmo{background:linear-gradient(135deg,rgba(255,110,0,.05),transparent)} .wp-block-column.media-lg img{border-radius:var(--r-lg);border:1px solid var(--line);width:100%} /* przyciski z edytora w naszym stylu */ .wp-block-button.btn .wp-block-button__link{ display:inline-flex;align-items:center;justify-content:center;padding:14px 28px; font-family:var(--nawigacyjny);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase; background:var(--accent);color:#FFFFFF;border:1px solid var(--accent);border-radius:var(--r-sm); transform-origin:center;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .45s ease} .wp-block-button.btn .wp-block-button__link{color:#FFFFFF} .wp-block-button.btn .wp-block-button__link:hover{transform:scale(1.05);filter:brightness(1.10); color:#FFFFFF;box-shadow:var(--cien-przycisku)} .wp-block-button.btn-s .wp-block-button__link{background:rgba(255,255,255,.65);color:var(--ink); border:1px solid var(--line-2);border-bottom:2px solid var(--accent);backdrop-filter:blur(8px)} html[data-wariant="ciemny"] .wp-block-button.btn-s .wp-block-button__link{background:rgba(10,14,20,.22)} .wp-block-buttons.cta{margin-top:32px} /* produkty wstawione skrótem [products] wewnątrz sekcji */ .wp-block-group.sekcja .woocommerce ul.products{margin-top:48px} @media (max-width:781px){ .wp-block-columns.dwie-kolumny,.wp-block-columns.karty{gap:24px} .wp-block-group.sekcja{padding:72px 0} } /* theme.json ustawia szerokość treści na 1280 px; nasze opakowanie dokłada margines boczny */ .wp-block-group.sekcja > .wp-block-group__inner-container, .wp-block-group.sekcja{max-width:none} .wp-block-group.wrap{max-width:var(--wrap)!important;width:100%} .wp-block-group.wrap > *{max-width:none} /* Belka administratora WordPressa ma 32 px (46 px na wąskim ekranie) i przykrywa nasz przyklejony pasek. Widzi to tylko zalogowany, ale i tak poprawiamy. */ body.admin-bar .pasek{top:32px} body.admin-bar .menu-mobilne{top:100px} @media screen and (max-width:782px){ body.admin-bar .pasek{top:46px} body.admin-bar .menu-mobilne{top:114px} } /* Blok „Przycisk" ma dwa poziomy: opakowanie .wp-block-button i właściwy odnośnik. Stylujemy wyłącznie odnośnik, żeby nie rysować ramki dwa razy („przycisk w przycisku"). */ .wp-block-button.btn,.wp-block-button.btn-s{background:none!important;border:0!important; border-radius:0!important;padding:0!important;box-shadow:none!important} .wp-block-button.btn-s .wp-block-button__link{border:1px solid var(--line-2); border-bottom:2px solid var(--accent);border-radius:var(--r-sm);backdrop-filter:blur(8px)} .wp-block-button.btn-s .wp-block-button__link:hover{color:var(--accent-txt)} /* ── newsletter ──────────────────────────────────────────────── */ .tylko-dla-czytnikow{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .newsletter{margin-top:26px;max-width:560px} .newsletter .pole{display:flex;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:var(--panel)} .newsletter input[type="email"]{flex:1;min-width:0;padding:16px 18px;background:transparent;border:0; color:var(--ink);font-family:var(--tekstowy);font-size:15px} .newsletter input[type="email"]::placeholder{color:var(--ink-3)} .newsletter input[type="email"]:focus{outline:2px solid var(--accent);outline-offset:-2px} .newsletter .btn{border-radius:0;border:0;padding:16px 26px;flex:none} .newsletter .btn:hover{transform:none;filter:brightness(1.08)} .newsletter .zgoda{display:flex;gap:10px;align-items:flex-start;margin-top:14px; font-size:13px;color:var(--ink-3);line-height:1.55;cursor:pointer} .newsletter .zgoda input{margin-top:3px;flex:none;accent-color:var(--accent)} .newsletter .zgoda a{color:var(--accent-txt);text-decoration:underline} @media (max-width:600px){ .newsletter .pole{flex-direction:column} .newsletter .btn{width:100%} } /* Delikatny cień pod paskiem — oddziela szkło od treści, tak jak w beccarii. */ /* ── koszyk: tabela, miniatury, kupon ────────────────────────── */ .woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--r-md); border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--panel)} .woocommerce table.shop_table th{font-family:var(--nawigacyjny);font-weight:700;letter-spacing:.1em; text-transform:uppercase;font-size:13px;color:var(--ink);padding:18px 16px;border-bottom:1px solid var(--line)} .woocommerce table.shop_table td{padding:18px 16px;border-top:1px solid var(--line);vertical-align:middle;color:var(--ink-2)} .woocommerce table.shop_table tr:first-child td{border-top:0} /* miniatura produktu — domyślnie WooCommerce daje 32 px, za mało */ .woocommerce table.shop_table td.product-thumbnail{width:96px} .woocommerce table.shop_table td.product-thumbnail img{width:80px!important;height:80px;object-fit:contain; background:var(--tile);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px} .woocommerce table.shop_table td.product-name a{color:var(--ink);font-weight:500} .woocommerce table.shop_table td.product-name a:hover{color:var(--accent-txt)} .woocommerce a.remove{color:var(--ink-3)!important;font-size:20px;line-height:1;width:24px;height:24px} .woocommerce a.remove:hover{color:var(--accent)!important;background:transparent!important} /* wiersz z kuponem — pole i przycisk tej samej wysokości, z oddechem */ .woocommerce table.shop_table td.actions{padding:20px 16px;background:transparent} .woocommerce table.shop_table td.actions .coupon{display:flex;gap:10px;align-items:center;float:none} .woocommerce table.shop_table td.actions .coupon label{display:none} .woocommerce #coupon_code.input-text{width:auto;min-width:220px;flex:0 1 280px; padding:13px 15px;height:auto;border:1px solid var(--line-2);border-radius:var(--r-sm); background:var(--bg);color:var(--ink);font-family:var(--tekstowy);font-size:15px} .woocommerce table.shop_table td.actions .button{padding:13px 24px;font-size:13px;white-space:nowrap} .woocommerce table.shop_table td.actions > .button{float:right} .woocommerce table.shop_table td.actions .button:disabled, .woocommerce table.shop_table td.actions .button[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none} /* ilość */ .woocommerce table.shop_table td.product-quantity .quantity .qty{width:72px;text-align:center} /* podsumowanie i kasa */ .woocommerce-cart .cart-collaterals .cart_totals h2, .woocommerce-checkout #order_review_heading{font-family:var(--naglowkowy);font-weight:600;font-size:20px;margin-bottom:14px} .woocommerce-cart .wc-proceed-to-checkout .button{width:100%;justify-content:center} .woocommerce .woocommerce-info,.woocommerce .woocommerce-message{border-radius:var(--r-md);border-top:3px solid var(--accent)} @media (max-width:768px){ .woocommerce table.shop_table td.actions .coupon{flex-wrap:wrap} .woocommerce #coupon_code.input-text{flex:1 1 100%;min-width:0} .woocommerce table.shop_table td.actions .coupon .button, .woocommerce table.shop_table td.actions > .button{width:100%;float:none;margin-top:10px} .woocommerce table.shop_table td.product-thumbnail img{width:60px!important;height:60px} } /* W wariancie jasnym pomarańczowa poświata na białym tle krzyczy. Fala i najazd używają wtedy szarego cienia; sam akcent zostaje na wypełnieniu. */ html[data-wariant="jasny"] .udostepnij a:hover, html[data-wariant="jasny"] .profile a:hover{box-shadow:0 6px 18px var(--poswiata-mocna)} /* ── karty produktów: równa wysokość i wyrównane przyciski ─────── Tytuły mają jedną albo dwie linijki, część produktów ma gwiazdki ocen — bez tego przyciski „Dodaj do koszyka" stały na różnych wysokościach. */ .woocommerce ul.products{align-items:stretch} .woocommerce ul.products li.product{display:flex;flex-direction:column;height:100%} .woocommerce ul.products li.product > a:first-of-type{display:block} .woocommerce ul.products li.product .woocommerce-loop-product__title{ min-height:2.5em;display:flex;align-items:flex-start} .woocommerce ul.products li.product .star-rating{margin:6px 22px 0;font-size:13px;color:var(--accent)} .woocommerce ul.products li.product .price{margin-top:auto;padding-top:12px} .woocommerce ul.products li.product .button{margin:16px 22px 22px} /* Miejsce na gwiazdki także tam, gdzie ich nie ma — inaczej ceny skaczą. */ .woocommerce ul.products li.product::after{content:"";display:block;order:0} /* ── odnośniki tekstowe: delikatne powiększenie przy najechaniu ── Prośba Witka: „hover effect grow 10%". Transform nie przesuwa sąsiadów, więc układ się nie rusza — rośnie tylko sam odnośnik. */ .pasek .menu a, .kolumny-stopki a, .blok-prawny a, .linki-prawne a, .menu-mobilne-lista a{ display:inline-block;transform-origin:center; transition:transform .3s cubic-bezier(.16,1,.3,1),color .2s ease} .pasek .menu a:hover, .kolumny-stopki a:hover, .blok-prawny a:hover, .linki-prawne a:hover, .menu-mobilne-lista a:hover{transform:scale(1.1);color:var(--accent-txt)} /* Każdy klikalny tekst w treści też podświetla się na pomarańczowo i lekko rośnie. */ /* Odnośnik karty produktu jest tu celowo WYKLUCZONY (`:not(...)`). Obejmuje zdjęcie, tytuł i cenę — gdyby rósł, powiększałaby się zawartość kafelka zamiast samego kafelka. Kafelek ma własny hover niżej. */ .tresc-edytora a:not(.wp-block-button__link):not(.woocommerce-loop-product__link):not(.button):not(.btn), .okruchy a, .karta a{display:inline-block;transform-origin:center; transition:transform .3s cubic-bezier(.16,1,.3,1),color .2s ease} .tresc-edytora a:not(.wp-block-button__link):not(.woocommerce-loop-product__link):not(.button):not(.btn):hover, .okruchy a:hover, .karta a:hover{transform:scale(1.1);color:var(--accent-txt)} /* Nic wewnątrz kafelka produktu się nie powiększa — ani zdjęcie, ani tytuł, ani cena. */ .woocommerce ul.products li.product a.woocommerce-loop-product__link, .woocommerce ul.products li.product a.woocommerce-loop-product__link:hover, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .woocommerce-loop-product__title{transform:none} /* Ikony społecznościowe w stopce — to samo powiększenie co pasek udostępniania. */ .profile a:hover{transform:scale(1.1)} /* ── pasmo BECCARII: proporcje jak w makiecie ───────────────────── Bloki dzielą kolumny po połowie, przez co nagłówek łamał się na trzy linijki. W makiecie kolumna z tekstem jest szersza i „przybliża BECCARII." mieści się w jednej. */ .sekcja.pasmo .wp-block-columns.dwie-kolumny{gap:56px;align-items:center} .sekcja.pasmo .dwie-kolumny > .wp-block-column:first-child{flex-basis:56%;flex-grow:0} .sekcja.pasmo .dwie-kolumny > .wp-block-column:last-child{flex-basis:44%;flex-grow:0} .sekcja.pasmo h2{text-wrap:balance} .sekcja.pasmo p{max-width:52ch} @media (max-width:781px){ .sekcja.pasmo .dwie-kolumny > .wp-block-column{flex-basis:100%!important} } /* ── jeden odstęp kicker → nagłówek, wszędzie taki sam ─────────── W sekcjach z bloków kicker to zwykły akapit, więc dostawał jeszcze odstęp międzyblokowy z theme.json (24 px) — łącznie z jego własnym marginesem robiła się dziura. Ustalamy jedną wartość dla całej strony. */ .kick{margin-bottom:14px} .kick + h2, .kick + h1, .kick + .wp-block-heading, p.kick + .wp-block-heading{margin-top:0} .wp-block-group .kick{margin-bottom:14px} .wp-block-group > .kick + *{margin-top:0} /* nagłówek → akapit pod nim: też jedna wartość */ .sekcja h2 + p, .wp-block-group.sekcja .wp-block-heading + p{margin-top:22px} /* ── prawa strona paska: przełącznik motywu, koszyk, języki ────── Ten sam język interakcji co wszędzie: powiększenie o 10% i pomarańczowa poświata. Skalujemy pojedyncze elementy, nie cały pasek, żeby nic nie skakało. */ .przelacznik-wariantu, .koszyk, .jezyki b, .jezyki a{transform-origin:center; transition:transform .3s cubic-bezier(.16,1,.3,1),color .2s ease, border-color .2s ease,box-shadow .25s ease,background .2s ease} .przelacznik-wariantu:hover, .koszyk:hover, .jezyki a:hover{transform:scale(1.1);color:var(--accent-txt); box-shadow:0 0 16px 2px rgba(255,110,0,.35)} .przelacznik-wariantu:hover{border-color:var(--accent)} .jezyki b:hover{transform:scale(1.1);box-shadow:0 0 16px 2px rgba(255,110,0,.45)} /* Kafelki języków muszą się wybijać ponad ramkę grupy, inaczej powiększenie zostaje przycięte. */ .jezyki{overflow:visible} .jezyki b,.jezyki a{position:relative;z-index:1} .jezyki b:hover,.jezyki a:hover{z-index:2} .jezyki b:first-child,.jezyki a:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)} .jezyki b:last-child,.jezyki a:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0} @media (prefers-reduced-motion:reduce){ .przelacznik-wariantu,.koszyk,.jezyki b,.jezyki a{transition:none} .przelacznik-wariantu:hover,.koszyk:hover,.jezyki a:hover,.jezyki b:hover{transform:none} } /* ── kafelki KATEGORII w sklepie ───────────────────────────────── WooCommerce renderuje je jako `li.product-category` z tytułem `.woocommerce-loop-category__title`, którego motyw wcześniej w ogóle nie obsługiwał — stąd napis wciśnięty w krawędź ramki. Dajemy mu ten sam oddech co tytułom produktów. */ .woocommerce ul.products li.product-category .woocommerce-loop-category__title{ font-family:var(--naglowkowy);font-weight:600;font-size:18px; padding:20px 22px 22px;margin:0;color:var(--ink); display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .woocommerce ul.products li.product-category a{display:block} .woocommerce ul.products li.product-category img{aspect-ratio:1;object-fit:contain; background:var(--tile);padding:18px} /* Licznik produktów WooCommerce wypisuje w znaczniku , a przeglądarki malują na żółto. Zerujemy tło i robimy z niego dyskretną liczbę. */ .woocommerce ul.products li.product-category mark.count, .woocommerce mark.count, .woocommerce mark{background:transparent;color:var(--ink-3); font-family:var(--monospace);font-size:13px;font-weight:400} /* ── sekcja „Możliwości": sześć kafelków z opisem ──────────────── Wariant B z makiety. Ikona w kwadratowej ramce po lewej, obok tytuł i jedno zdanie. Trzy kolumny na desktopie, dwie na tablecie, jedna na telefonie. Kafelek zachowuje się jak karta produktu: unosi się i dostaje pomarańczową ramkę pod kursorem. */ .siatka-mozliwosci{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .mozliwosc{display:flex;gap:16px;align-items:flex-start;padding:26px 24px; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md); transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s} .mozliwosc:hover{border-color:rgba(255,110,0,.6);transform:translateY(-3px);box-shadow:var(--cien-karty)} .mozliwosc-ikona{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center; border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--accent)} .mozliwosc h3{font-family:var(--naglowkowy);font-weight:600;font-size:17px;line-height:1.3;margin:0} .mozliwosc p{font-size:14px;line-height:1.55;color:var(--ink-3);margin:5px 0 0} @media (max-width:1000px){ .siatka-mozliwosci{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .siatka-mozliwosci{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .mozliwosc{transition:none} .mozliwosc:hover{transform:none} } /* ── sekcja z renderem: zdjęcie produktu obok tekstu ───────────── Render leży na jasnym kafelku, żeby białe tło pliku nie „wycinało" dziury w sekcji. W wariancie ciemnym kafelek zostaje jasny — inaczej render na białym tle wyglądałby jak naklejka. */ .sekcja.render .wp-block-columns{gap:56px;align-items:center} .sekcja.render figure, .sekcja.render .wp-block-image{margin:0;background:var(--tile);border:1px solid var(--line); border-radius:var(--r-md);padding:26px;overflow:hidden} .sekcja.render .wp-block-image img{width:100%;height:auto;display:block; transition:transform .5s cubic-bezier(.16,1,.3,1)} .sekcja.render .wp-block-image:hover img{transform:scale(1.03)} @media (max-width:781px){ .sekcja.render .wp-block-columns{gap:32px} } /* Napis na przycisku zostaje biały ZAWSZE — także wtedy, gdy przycisk jest odnośnikiem wewnątrz treści. Reguła „podświetl klikalny tekst na pomarańczowo" ma wyższą wagę niż sam styl przycisku, więc pomarańczowy napis zlewał się z pomarańczowym tłem. Tu wagę wyrównujemy. */ .tresc-edytora .woocommerce a.button, .tresc-edytora .woocommerce a.button:hover, .woocommerce ul.products li.product a.button, .woocommerce ul.products li.product a.button:hover, .woocommerce a.button:hover, .woocommerce a.button.alt:hover, .btn:not(.wp-block-button):hover{color:#FFFFFF} /* ── pas newslettera nad kolumnami stopki ──────────────────────── Ciemny na pełną szerokość, w obu wariantach motywu — tak jak w makiecie B. Jest częścią