), potrzebują wyższej specyficzności niż .hero-strony p – inaczej dostawały jego 20 px i jasny kolor (plakietka „Nasza specjalizacja” miała 1,49:1 na limonce). */ .hero-strony .znacznik{display:inline-block;margin-block-end:var(--s-5); color:var(--tusz);font-size:var(--t-xs);line-height:1.4;max-width:none} /* --- Układ: treść + kolumna boczna ----------------------------------------- */ /* min-width:0 na dzieciach jest konieczne — bez tego szeroka tabela rozpycha kolumnę zamiast przewijać się we własnym kontenerze. */ .uklad-tresc{display:grid;gap:var(--s-12)} .uklad-tresc>*{min-width:0} @media (min-width:64em){ .uklad-tresc{grid-template-columns:minmax(0,1fr) 19rem;gap:var(--s-12);align-items:start} } /* Kolumna treści może być szeroka (tabele, ramki), ale wiersz TEKSTU trzyma miarę ok. 66 znaków – także na tablecie, gdzie kolumny bocznej obok nie ma. Akapity mają ją z reguły globalnej p, listy i ramki dostają ją tutaj. */ .uklad-tresc .proza{max-width:none} .proza>:where(ul,ol,dl,blockquote,.uwaga){max-width:var(--measure)} /* Kolumna boczna celowo NIE jest przyklejona — przy dłuższych panelach przyklejenie ucinało ich dolną część i przeszkadzało przy czytaniu. Jedynym przyklejonym elementem serwisu pozostaje nagłówek. */ .kolumna-boczna{display:grid;gap:var(--s-6);align-content:start} .panel-kontakt{background:var(--stal);padding:var(--s-6);display:grid;gap:var(--s-2)} .panel-kontakt h2{font-size:var(--t-lg);text-transform:uppercase;letter-spacing:.07em} .panel-kontakt p{margin:0;max-width:none} /* :not(.btn) jest tu konieczne — bez tego reguła nadpisywała kolor tekstu przycisku i granatowy napis znikał na granatowym tle. */ .panel-kontakt a:not(.btn){font-family:var(--font-display);font-weight:700;font-size:var(--t-2xl); text-decoration:none;color:var(--granat)} .panel-kontakt .btn{margin-block-start:var(--s-3);justify-content:center;font-size:var(--t-lg)} .panel-linki{border:1px solid var(--line);padding:var(--s-6)} .panel-linki h2{font-size:var(--t-lg);text-transform:uppercase;letter-spacing:.07em; margin-block-end:var(--s-4)} .panel-linki ul{list-style:none;padding:0;display:grid;gap:var(--s-3)} .panel-linki a{font-weight:500} /* --- Siatki ---------------------------------------------------------------- */ /* min(X,100%): na wąskim telefonie kolumna nie może być szersza niż kontener (bez tego karty wychodziły poza margines, a przy 320 px ucinało tekst). */ .siatka{display:grid;gap:var(--s-5);align-items:stretch} .siatka--3{grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))} /* Tablet: trzy kolumny zamiast dwóch, żeby trzy karty nie zostawiały sieroty. */ @media (min-width:48em) and (max-width:63.99em){ .siatka--3{grid-template-columns:repeat(3,minmax(0,1fr))} } /* --- Katalog usług: zwięzły spis bez opisów, gdy liczy się przegląd --------- */ .katalog{list-style:none;padding:0;display:grid;gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))} /* 10 pozycji: 2 kolumny na tablecie i małym ekranie, 5 na desktopie – bez sierot. */ @media (min-width:30em) and (max-width:63.99em){ .katalog{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:64em){.katalog{grid-template-columns:repeat(5,minmax(0,1fr))}} .katalog a{ position:relative;display:flex;align-items:center;gap:var(--s-3);height:100%; background:var(--biel);border:1px solid var(--line);padding:var(--s-4) var(--s-5); text-decoration:none;color:inherit;font-family:var(--font-display);font-weight:600; font-size:var(--t-lg);line-height:1.15;text-transform:uppercase;letter-spacing:.02em; transition:border-color .15s ease,background-color .15s ease; } .katalog a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:var(--limonka);transform:scaleY(0);transform-origin:top;transition:transform .2s ease} .katalog svg{width:1.75rem;height:1.75rem;flex:none;color:var(--blekit)} .katalog li.wyroznik a{border-color:var(--granat);border-width:2px} .katalog li.wyroznik svg{color:var(--limonka-ciemna)} @media (hover:hover){ .katalog a:hover{border-color:var(--granat);background:var(--biel)} .katalog a:hover::before{transform:scaleY(1)} } /* --- Kafelek usługi -------------------------------------------------------- */ .usluga{ position:relative;display:flex;flex-direction:column;gap:var(--s-3); background:var(--biel);border:1px solid var(--line); padding:var(--s-6);text-decoration:none;color:inherit; transition:border-color .15s ease,background-color .15s ease; } .usluga::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--limonka); transform:scaleY(0);transform-origin:top;transition:transform .2s ease; } .usluga svg{width:2rem;height:2rem;color:var(--blekit)} /* Tytuł karty wygląda tak samo niezależnie od poziomu nagłówka (h2 na liście, h3 w sekcji) – styl należy do komponentu, nie do znacznika. */ .usluga h2,.usluga h3{font-size:var(--t-xl);text-transform:uppercase;letter-spacing:.01em} .usluga p{font-size:var(--t-sm);color:var(--tusz-slaby);margin:0;flex:1} .usluga .wiecej{font-family:var(--font-display);font-weight:600;font-size:var(--t-base); text-transform:uppercase;letter-spacing:.05em;color:var(--blekit); display:inline-flex;align-items:center;gap:var(--s-2)} .usluga .wiecej svg{width:1.1em;height:1.1em;color:inherit;transition:transform .18s ease} @media (hover:hover){ .usluga:hover{border-color:var(--granat);background:var(--stal)} .usluga:hover::before{transform:scaleY(1)} .usluga:hover .wiecej svg{transform:translateX(.25rem)} } .usluga--wyroznik{border-color:var(--granat);border-width:2px} .znacznik{ align-self:flex-start;font-family:var(--font-display);font-weight:600;font-size:var(--t-xs); text-transform:uppercase;letter-spacing:.09em; background:var(--limonka);color:var(--tusz);padding:var(--s-1) var(--s-3); border-radius:var(--radius-pill); } /* Od tabletu kafel specjalizacji zajmuje cały wiersz: 1 + 3×3 zamiast 3+3+3+1 z samotnym ostatnim kaflem. */ @media (min-width:48em){ .siatka--3>.usluga--wyroznik{grid-column:1/-1;display:grid; grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--s-6);row-gap:var(--s-2);align-items:center} .siatka--3>.usluga--wyroznik>svg{grid-column:1;grid-row:1/4;width:2.5rem;height:2.5rem} .siatka--3>.usluga--wyroznik>:is(.znacznik,h2,h3,p){grid-column:2} .siatka--3>.usluga--wyroznik>.znacznik{justify-self:start} .siatka--3>.usluga--wyroznik>.wiecej{grid-column:3;grid-row:1/4} } /* --- Blok specjalizacji na stronie głównej --------------------------------- */ .specjalizacja{display:grid;gap:var(--s-10)} @media (min-width:64em){.specjalizacja{grid-template-columns:1.15fr .85fr;gap:var(--s-16);align-items:start}} .specjalizacja h2{margin-block-end:var(--s-5)} .specjalizacja p,.specjalizacja .lista{margin-block-end:var(--s-5)} /* --- Metryka usługi -------------------------------------------------------- */ .metryka{border:2px solid var(--granat);background:var(--biel);container-type:inline-size} .metryka caption{ font-family:var(--font-display);font-weight:700;font-size:var(--t-lg); text-transform:uppercase;letter-spacing:.07em;text-align:left; background:var(--granat);color:var(--biel);padding:var(--s-3) var(--s-5); } .metryka th,.metryka td{padding:var(--s-3) var(--s-5);text-align:left;vertical-align:top; border-block-start:1px solid var(--line);font-size:var(--t-sm)} .metryka tr:first-child th,.metryka tr:first-child td{border-block-start:0} .metryka th{font-weight:400;color:var(--tusz-slaby);width:44%} .metryka td{font-weight:600} /* W wąskim kontenerze (kolumna boczna) etykieta ląduje nad wartością — inaczej wartości łamią się po dwa słowa na wiersz. */ @container (max-width:27rem){ .metryka tbody tr{display:flex;flex-direction:column;border-block-start:1px solid var(--line)} .metryka tbody tr:first-child{border-block-start:0} .metryka th,.metryka td{width:auto;border-block-start:0;padding-block:0} .metryka th{padding-block-start:var(--s-3);font-family:var(--font-display); font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em} .metryka td{padding-block-end:var(--s-3);font-size:var(--t-base)} } /* --- Proza ----------------------------------------------------------------- */ .proza{max-width:var(--measure)} .proza>*+*{margin-block-start:var(--s-5)} /* H2 w tekście jest mniejszy niż nagłówek sekcji strony – to podział treści, nie strony. */ .proza h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); margin-block-start:var(--s-12);margin-block-end:var(--s-4);text-transform:none} .proza h2:first-child{margin-block-start:0} .proza>h2+*{margin-block-start:0} .proza a{font-weight:500} .lista{list-style:none;padding:0;display:grid;gap:var(--s-3)} .lista li{position:relative;padding-left:var(--s-6)} .lista li::before{ content:"";position:absolute;left:0;top:.6em;width:.7rem;height:3px; background:var(--limonka);transform:skewX(var(--skos)); } /* Numeracja w tym samym stylu co .kroki (01, 02…) – jeden system w całym serwisie. */ .lista--num{counter-reset:l} .lista--num li{counter-increment:l;padding-left:var(--s-8)} .lista--num li::before{ content:counter(l,decimal-leading-zero);top:0;width:auto;height:auto;background:none;transform:none; font-family:var(--font-display);font-weight:700;font-size:var(--t-lg);color:var(--limonka-ciemna); } /* Termin trzyma się swojej definicji; odstęp oddziela dopiero kolejne pary. */ .defs{display:grid;gap:0;border-left:3px solid var(--stal-ciemna);padding-left:var(--s-6)} .defs dt{font-family:var(--font-display);font-weight:700;font-size:var(--t-xl);color:var(--granat)} .defs dt:not(:first-child){margin-block-start:var(--s-6)} .defs dd{margin:var(--s-1) 0 0;color:var(--tusz-slaby)} /* Rozmieszczenie jest jawne (grid-column/grid-row). Przy automatycznym opis lądował w kolumnie numeru i łamał się po jednym słowie na wiersz. */ .kroki{list-style:none;padding:0;counter-reset:k;display:grid;gap:var(--s-6)} .kroki li{counter-increment:k;display:grid;grid-template-columns:2.75rem minmax(0,1fr); column-gap:var(--s-4);row-gap:var(--s-2);align-items:baseline} .kroki li::before{ content:counter(k,decimal-leading-zero);grid-column:1;grid-row:1; font-family:var(--font-display);font-weight:700;font-size:var(--t-2xl); color:var(--limonka-ciemna);line-height:1; } .kroki strong{grid-column:2;grid-row:1;display:block;font-family:var(--font-display); font-weight:700;font-size:var(--t-xl);color:var(--granat);line-height:1.15} .kroki span{grid-column:2;grid-row:2;color:var(--tusz-slaby)} @media (max-width:29.99em){ .kroki li{grid-template-columns:2.25rem minmax(0,1fr);column-gap:var(--s-3)} } .uwaga{ background:var(--stal);border-left:4px solid var(--blekit); padding:var(--s-5) var(--s-6); } .uwaga p{margin:0;max-width:none;font-size:var(--t-sm)} /* --- FAQ ------------------------------------------------------------------- */ .faq{display:grid;gap:var(--s-3)} .faq__item{border:1px solid var(--line);background:var(--biel)} .faq__item[open]{border-color:var(--granat)} .faq__q{ display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); padding:var(--s-5) var(--s-6);cursor:pointer;list-style:none; } .faq__q::-webkit-details-marker{display:none} .faq__q h3{font-size:var(--t-xl);text-transform:none;font-weight:600;margin:0} .faq__mark{width:1.4rem;height:1.4rem;flex:none;color:var(--blekit); transform:rotate(90deg);transition:transform .2s ease} .faq__item[open] .faq__mark{transform:rotate(-90deg)} @media (hover:hover){.faq__q:hover{background:var(--stal)}} .faq__a{padding:0 var(--s-6) var(--s-6)} .faq__a p+p{margin-block-start:var(--s-4)} .faq__a p{color:var(--tusz-slaby)} /* --- Partnerzy: certyfikaty w formie tablicy na ścianie warsztatu ---------- */ /* Jawne kolumny zamiast auto-fit: sieć Q Service zawsze na całą szerokość (telefon, tablet) albo jako szerszy pierwszy kafel (desktop) – bez pustych pól. */ .partnerzy{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:48em){.partnerzy{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:64em){.partnerzy{grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr))}} .partner{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3); background:var(--biel);border:1px solid var(--stal-ciemna);padding:var(--s-5) var(--s-4); text-align:center;min-height:8.5rem; } .partner picture{max-width:100%} /* Loga są przycięte do samego znaku; wysokość wspólna, szerokość nie większa niż kafel. */ .partner img{height:2.75rem;width:auto;max-width:100%;object-fit:contain} .partner span{font-size:var(--t-xs);color:var(--tusz-slaby);line-height:1.35} .partner--glowny{grid-column:1/-1;border:2px solid var(--granat)} .partner--glowny img{height:3.5rem} @media (min-width:64em){.partner--glowny{grid-column:auto}} /* --- Opinie ---------------------------------------------------------------- */ .oceny{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr)); margin-block-end:var(--s-12)} .ocena{background:var(--biel);border:1px solid var(--line);padding:var(--s-6)} .ocena b{display:block;font-family:var(--font-display);font-size:var(--t-4xl); font-weight:700;line-height:1;color:var(--granat)} .ocena .gwiazdki{display:flex;gap:.15rem;margin-block:var(--s-2);color:var(--limonka-ciemna)} .ocena .gwiazdki svg{width:1.1rem;height:1.1rem} .ocena p{font-size:var(--t-sm);color:var(--tusz-slaby);margin:0} .opinie{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr))} .opinia{ position:relative;background:var(--biel);border:1px solid var(--line); padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4); } .opinia>svg{width:1.75rem;height:1.75rem;color:var(--stal-ciemna)} .opinia blockquote{margin:0;font-size:var(--t-lg);line-height:1.55} .opinia blockquote p{margin:0;max-width:none} .opinia footer{margin-block-start:auto;font-size:var(--t-sm);color:var(--tusz-slaby)} .opinia cite,.opinia__autor{font-style:normal;font-weight:600;color:var(--tusz);display:block} .opinia--zwiezla blockquote{font-size:var(--t-base)} /* Karty w jednym rzędzie dzielą wiersze siatki (ikona, cytat, podpis), więc podpisy zaczynają się na tej samej wysokości, nawet gdy dopisek ma dwa wiersze. */ @supports (grid-template-rows:subgrid){ .opinia{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--s-4)} .opinia footer{margin-block-start:0} } /* --- Tabele (polityka cookies) --------------------------------------------- */ /* Cienie przy krawędziach pokazują, że tabelę da się przewinąć w bok: warstwy „local” przykrywają cień, dopóki nie ma nic do przewinięcia. */ .tabela-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--line); background: linear-gradient(to right,var(--biel) 30%,rgba(255,255,255,0)) left center / 2.5rem 100% no-repeat local, linear-gradient(to left,var(--biel) 30%,rgba(255,255,255,0)) right center / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%,rgba(16,22,28,.2),rgba(16,22,28,0)) left center / .875rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(16,22,28,.2),rgba(16,22,28,0)) right center / .875rem 100% no-repeat scroll, var(--biel)} .tabela{min-width:26rem} .tabela th,.tabela td{padding:var(--s-4) var(--s-5);text-align:left;vertical-align:top; border-block-start:1px solid var(--line)} .tabela thead th{background:var(--granat);color:var(--biel);border:0; font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-weight:600} .tabela tbody tr:first-child th,.tabela tbody tr:first-child td{border-block-start:0} .tabela th[scope=row]{font-weight:600} /* Kolumna „Cel” ma dość miejsca, żeby nie łamać się po dwa słowa. */ .tabela td:nth-child(3){min-width:15rem} /* Telefon: każdy wiersz to karta z podpisanymi polami (etykiety z nagłówka tabeli, klasy nadaje main.js). Bez JS tabela zostaje przewijana ze wskazówką cienia. */ @media (max-width:47.99em){ .tabela-wrap--karty{overflow:visible;border:0;background:none} .tabela--karty{min-width:0} .tabela--karty thead{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} .tabela--karty,.tabela--karty tbody,.tabela--karty th,.tabela--karty td{display:block} .tabela--karty tbody tr{display:grid;grid-template-columns:minmax(0,1fr); border:1px solid var(--line);background:var(--biel);padding:var(--s-4) var(--s-5); margin-block-end:var(--s-3)} .tabela--karty tbody tr:first-child th,.tabela--karty tbody th,.tabela--karty tbody td{border:0} .tabela--karty th[scope=row]{font-family:var(--font-display);font-weight:700; font-size:var(--t-lg);padding:0 0 var(--s-2);overflow-wrap:anywhere} .tabela--karty tbody td{padding:var(--s-1) 0;min-width:0;font-size:var(--t-sm)} .tabela--karty tbody td::before{content:attr(data-label);content:attr(data-label) / ""; display:block;font-family:var(--font-display);font-size:var(--t-xs);font-weight:600; text-transform:uppercase;letter-spacing:.08em;color:var(--tusz-slaby)} } /* --- Wpisy z bazy wiedzy --------------------------------------------------- */ .wpisy{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))} @media (min-width:48em) and (max-width:63.99em){ .wpisy{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)} } .wpis{display:flex;flex-direction:column;background:var(--biel); border:1px solid var(--line);text-decoration:none;color:inherit; transition:border-color .15s ease} @media (hover:hover){.wpis:hover{border-color:var(--granat)}} .wpis img{aspect-ratio:3/2;object-fit:cover;width:100%} .wpis__tresc{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1} .wpis__meta{font-size:var(--t-xs);color:var(--tusz-slaby);text-transform:uppercase; letter-spacing:.07em;font-family:var(--font-display);font-weight:600} /* Jak w .usluga: ten sam rozmiar tytułu dla h2 (lista wpisów) i h3 (strona główna). */ .wpis h2,.wpis h3{font-size:var(--t-xl);text-transform:none;line-height:1.15} .wpis p{font-size:var(--t-sm);color:var(--tusz-slaby);margin:0} /* --- Artykuł --------------------------------------------------------------- */ /* Kontener nagłówka to pełna .wrap (ta sama linia co okruszki i treść); szerokość ograniczamy dzieciom. max-width na samej .wrap centrował nagłówek i przesuwał go o 144 px względem siatki. */ .artykul__naglowek>*{max-width:54rem} .hero-strony .artykul__meta{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2); font-size:var(--t-sm);color:var(--na-ciemnym);margin-block-end:var(--s-5); font-family:var(--font-display);text-transform:uppercase;letter-spacing:.07em;max-width:none} /* Separator doklejony NA KOŃCU pozycji: po zawinięciu żaden wiersz nie zaczyna się od kropki. Druga deklaracja (z pustym tekstem alternatywnym) ukrywa kropkę przed czytnikami. */ .artykul__meta span:not(:last-child)::after{content:"·";content:"·" / ""; margin-inline-start:var(--s-2);color:var(--na-ciemnym-slaby)} .artykul__foto{margin-block-end:var(--s-12)} /* Na telefonie 3:2 – przy 16:7 zdjęcie zostawało paskiem 312×137 px. */ .artykul__foto img{width:100%;aspect-ratio:3/2;object-fit:cover} @media (min-width:48em){.artykul__foto img{aspect-ratio:16/7}} .artykul__foto figcaption{font-size:var(--t-xs);color:var(--tusz-slaby); padding-block-start:var(--s-2)} /* --- Galeria --------------------------------------------------------------- */ .galeria{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))} .galeria figure{margin:0;border:1px solid var(--line);background:var(--biel)} .galeria img{width:100%;object-fit:cover} .galeria figcaption{padding:var(--s-4) var(--s-5);font-size:var(--t-sm);color:var(--tusz-slaby)} /* --- Kontakt --------------------------------------------------------------- */ .kontakt{display:grid;gap:var(--s-10)} @media (min-width:64em){.kontakt{grid-template-columns:1fr 1fr;gap:var(--s-16)}} /* Gdy dwa przyciski nie mieszczą się w wierszu, każdy zajmuje pełną szerokość zamiast układać się schodkowo (różne szerokości jeden pod drugim). */ .kontakt .btn-grupa .btn{flex:1 1 auto;justify-content:center} .dane{display:grid;gap:var(--s-6);list-style:none;padding:0} .dane li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s-4);align-items:start} .dane svg{width:1.6rem;height:1.6rem;color:var(--blekit);margin-top:.15rem} .dane dt,.dane b{display:block;font-family:var(--font-display);font-size:var(--t-sm); text-transform:uppercase;letter-spacing:.08em;color:var(--tusz-slaby)} .dane a{font-weight:600;font-size:var(--t-lg)} .dane p{margin:0} .mapa{border:1px solid var(--line);background:var(--stal); display:grid;place-items:center;text-align:center;padding:var(--s-10) var(--s-6); min-height:22rem;gap:var(--s-4)} .mapa iframe{width:100%;height:100%;min-height:22rem;border:0;display:block} .mapa p{font-size:var(--t-sm);color:var(--tusz-slaby);max-width:34rem} .mapa--zaladowana{padding:0;min-height:0;display:block} /* --- Pas CTA --------------------------------------------------------------- */ .cta{background:var(--granat);color:var(--biel);--focus:var(--limonka)} .cta .wrap{padding-block:var(--section-y);display:grid;gap:var(--s-8)} @media (min-width:64em){ .cta .wrap{grid-template-columns:1.3fr auto;align-items:center;gap:var(--s-16)} } .cta h2{margin-block-end:var(--s-4)} .cta p{color:var(--na-ciemnym-jasny);font-size:var(--t-lg);margin:0} .cta p.cta__marka{margin-block-start:var(--s-4);font-size:var(--t-base);color:var(--na-ciemnym)} .cta .btn-grupa{flex-shrink:0} /* --- Stopka ---------------------------------------------------------------- */ .stopka{position:relative;background:var(--granat);color:var(--na-ciemnym);--focus:var(--limonka)} .stopka::before{ content:"";display:block;height:6px;background:var(--limonka); transform:skewY(calc(var(--skos) * .06));transform-origin:left; } .stopka__glowna{display:grid;gap:var(--s-10);padding-block:var(--s-16) var(--s-12)} @media (min-width:48em){.stopka__glowna{grid-template-columns:repeat(2,1fr)}} @media (min-width:64em){.stopka__glowna{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s-8)}} .stopka h2{font-size:var(--t-lg);text-transform:uppercase;letter-spacing:.09em; color:var(--biel);margin-block-end:var(--s-5)} .stopka ul{list-style:none;padding:0;display:grid;gap:var(--s-3)} /* Listy odnośników: wyższe pole dotyku (ok. 40 px) przy mniejszym odstępie. */ .stopka nav ul{gap:var(--s-1)} .stopka nav ul a{display:inline-block;padding-block:var(--s-2)} .stopka a{color:var(--na-ciemnym);text-decoration:none} .stopka a:hover{color:var(--limonka);text-decoration:underline} .stopka p{font-size:var(--t-sm);line-height:1.6} .stopka__marka{display:flex;align-items:center;gap:var(--s-3);margin-block-end:var(--s-5); text-decoration:none} .stopka__marka picture{flex:none} .stopka__marka img{width:56px;height:56px;background:var(--biel);border-radius:var(--radius-pill);padding:2px} .stopka__marka b{font-family:var(--font-display);font-size:var(--t-xl);color:var(--biel); text-transform:uppercase;letter-spacing:.02em;display:block;line-height:1.1} .stopka__marka span{font-size:var(--t-xs);display:block} .stopka__nip{font-size:var(--t-xs);color:var(--na-ciemnym-slaby);margin-block-start:var(--s-4)} .stopka__dol{border-top:1px solid var(--linia-ciemna);padding-block:var(--s-3); display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);align-items:center; justify-content:space-between;font-size:var(--t-sm)} .stopka__dol nav{display:flex;flex-wrap:wrap;column-gap:var(--s-5)} .stopka__dol nav a,.stopka__dol button{display:inline-block;padding-block:var(--s-3)} /* Przycisk ustawień wygląda jak sąsiednie odnośniki (bez stałego podkreślenia). */ .stopka__dol button{background:none;border:0;color:var(--na-ciemnym);cursor:pointer; padding-inline:0;font:inherit;text-decoration:none} .stopka__dol button:hover{color:var(--limonka);text-decoration:underline} /* --- Baner zgód ------------------------------------------------------------ */ /* max-height + przewijanie: z otwartymi „Ustawieniami” baner bywa wyższy niż ekran telefonu – bez tego jego góra (tytuł, opis, linki do polityk) była nieosiągalna. */ .zgody{ position:fixed;left:0;right:0;bottom:0;z-index:80; max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain; background:var(--biel);border-top:4px solid var(--limonka); box-shadow:0 -8px 32px rgba(16,22,28,.18); } .zgody[hidden]{display:none} /* Fokus na całym banerze ustawia skrypt (po otwarciu ze stopki) – bez ramki wokół regionu. */ .zgody:focus{outline:none} /* Otwarte menu mobilne ma pierwszeństwo; baner wraca po jego zamknięciu. */ html.menu-otwarte .zgody{visibility:hidden} .zgody .wrap{padding-block:var(--s-6);display:grid;gap:var(--s-5)} @media (min-width:64em){ .zgody .wrap{grid-template-columns:1fr auto;align-items:center;gap:var(--s-10)} } .zgody h2{font-size:var(--t-xl);text-transform:uppercase;letter-spacing:.05em; margin-block-end:var(--s-2)} .zgody p{font-size:var(--t-sm);color:var(--tusz-slaby);margin:0} /* „Akceptuj” i „Odrzuć” mają tę samą szerokość, wagę i kontrast — bez ciemnych wzorców. */ .zgody__akcje{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)} .zgody__akcje .btn{font-size:var(--t-base);padding:var(--s-3) var(--s-5);min-height:2.75rem; justify-content:center;text-align:center} .zgody__akcje .btn::after{display:none} .zgody__akcje .btn--odrzuc{--btn-bg:var(--tusz);--btn-fg:var(--biel)} .zgody__akcje .btn--ustawienia{--btn-bg:transparent;--btn-fg:var(--granat); box-shadow:inset 0 0 0 2px var(--line)} @media (hover:hover){ .zgody__akcje .btn--odrzuc:hover{--btn-bg:#000} .zgody__akcje .btn--ustawienia:hover{--btn-bg:var(--stal);--btn-fg:var(--granat)} } .zgody__panel{display:grid;gap:var(--s-4);padding-block-start:var(--s-5); border-top:1px solid var(--line);grid-column:1/-1} .zgody__panel[hidden]{display:none} .zgody__panel fieldset{display:grid;gap:var(--s-4);margin:0;padding:0;border:0;min-width:0} .zgody__panel .zgody__akcje{display:flex} .zgody__opcja{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start} .zgody__opcja input{width:1.15rem;height:1.15rem;margin-top:.3rem;accent-color:var(--blekit)} .zgody__opcja b{display:block;font-weight:600} .zgody__opcja span{font-size:var(--t-sm);color:var(--tusz-slaby)} /* Telefon: zwarty baner (ok. 1/3 ekranu zamiast połowy), „Akceptuj” i „Odrzuć” obok siebie w równych kolumnach, „Ustawienia” pod nimi na całą szerokość. */ @media (max-width:47.99em){ .zgody .wrap{padding-block:var(--s-4);gap:var(--s-3)} .zgody h2{font-size:var(--t-lg);margin-block-end:var(--s-1)} .zgody p{font-size:var(--t-xs);line-height:1.5} .zgody__akcje{grid-template-columns:1fr 1fr;gap:var(--s-2)} .zgody__akcje .btn{padding-inline:var(--s-3);font-size:var(--t-sm)} .zgody__akcje .btn--ustawienia{grid-column:1/-1} .zgody__panel .zgody__akcje .btn{flex:1 1 100%} } /* --- Drobne ---------------------------------------------------------------- */ .tekst-slaby{color:var(--tusz-slaby)} .zrodlo{font-size:var(--t-xs);color:var(--tusz-slaby);margin-block-start:var(--s-6)} .centruj-cta{margin-block-start:var(--s-12)} .tylko-czytnik{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* W przycisku reguła .btn span (pozycja względna, odstęp) nie może odsłonić tekstu dla czytników. */ .btn>.tylko-czytnik{position:absolute;padding:0} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } @media print{ .topbar,.naglowek__akcje,.burger,.zgody,.cta,.crumbs,.skip{display:none} body{color:#000} p{orphans:3;widows:3} a[href^="/"]::after{content:" (warsztatdabek.pl" attr(href) ")";font-size:.8em} }