/* Adapia Energy — szata podglądu sekcji klimatyzacji (robocza, na boku) */ :root{ --blue:#185FA5; --blue-dark:#12497e; --orange:#F47B20; --orange-dark:#d9660f; --ink:#1c2733; --muted:#5b6b7a; --line:#e3e8ee; --bg:#f6f8fa; --card:#fff; --ok:#1f9d55; /* KOLOR PRZEWODNI KATEGORII (2026-08-16). Wartosci podstawia generator INLINE na , biorac je z dane/silosy.json. Tutaj stoi tylko wartosc zapasowa, czyli barwa marki: strona bez podstawienia wyglada jak przed 16.08, a nie polamana. Zasieg jest swiadomie waski. Kolor wchodzi tam, gdzie mowi "gdzie jestem": pasek pod belka, aktywna pozycja, naglowki H2 i H3 kart, tinty tabel i chipow, tint hero. Kolor NIE wchodzi na przyciski: pomaranczowy przycisk to sygnal konwersji i musi znaczyc to samo na kazdej stronie serwisu. Uzasadnienie palety i progi kontrastu: _meta.kolory w dane/silosy.json, pomiar w tests/test_kolory_silosow.py. */ --akcent:#185FA5; --akcent-tlo:#EAF1F7; } *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{margin:0;background:var(--bg);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.6;font-size:17px} .wrap{max-width:1000px;margin:0 auto;padding:0 20px} /* pasek roboczy */ .draftbar{background:#2b2f36;color:#fff;font-size:13px;text-align:center;padding:7px 12px} .draftbar b{color:#ffcf99} /* nagłówek strony */ /* Dolna krawedz belki to PASEK KATEGORII: 3 px w kolorze silosu zamiast 1 px szarosci. Belka jest przyklejona, wiec ten pasek jest jedynym sygnalem orientacji widocznym przez caly czas przewijania, takze na telefonie. Zero dodatkowych elementow w markupie, zero kosztu wydajnosciowego, bo to ta sama wlasciwosc co dotad. */ header.site{background:var(--card);border-bottom:3px solid var(--akcent);position:sticky;top:0;z-index:50} header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;flex-wrap:wrap;gap:6px 12px} .logo{font-weight:800;color:var(--blue);font-size:20px;letter-spacing:.2px} .logo span{color:var(--orange)} .logo img{height:42px;width:auto;display:block} /* nawigacja: czytelne pozycje + wyrazne podswietlenie aktywnej strony (klient widzi, gdzie jest). Separatory "·" w markupie sa wyciszone (kolor .crumbs), pozycje to wyrazne, wieksze linki-pigulki. */ .crumbs{font-size:14px;color:#d4dbe3;display:flex;flex-wrap:wrap;align-items:center;gap:1px 2px} .crumbs a{color:var(--blue-dark);text-decoration:none;font-weight:700;padding:6px 9px;border-radius:9px;line-height:1.1;transition:background .12s,color .12s} .crumbs a:hover{background:#eef4fb;color:var(--blue-dark)} .crumbs a.active{background:var(--akcent);color:#fff;box-shadow:0 2px 8px rgba(9,28,52,.28)} .crumbs a.active:hover{background:var(--akcent);color:#fff} /* Telefon w naglowku (sticky), stale widoczne CTA "zadzwon" w prawym gornym rogu. Numer MUSI byc '506637703' (bez spacji) - wymog DNI (podmiana numeru dla ruchu z reklam). */ .site-tel{display:inline-flex;align-items:center;gap:7px;text-decoration:none;background:var(--blue-dark); color:#fff;font-weight:800;font-size:15px;white-space:nowrap;letter-spacing:.3px;padding:7px 13px; border:1.5px solid rgba(255,255,255,.65);border-radius:10px;transition:background .12s} .site-tel::before{content:"\260E";font-size:18px;line-height:1} .site-tel:hover{background:#0e3c6b;color:#fff} /* Przelacznik pory dnia w belce. TRZY stany, nie dwa (patrz dane/godziny-pracy.json): `telefon` = pon-pt 9-17, telefon jest wezwaniem pierwszym; `mail` = jestesmy otwarci (8-18, sobota), ale poza oknem telefonicznym; `poza` = zamkniete. Stan `mail` i `poza` wygladaja tak samo (formularz pierwszy), bo roznica jest w TRESCI komunikatu, nie w hierarchii przyciskow. Rozmiary bez zmian, wiec nic nie przeskakuje. */ [data-pora="telefon"] .site-tel{background:var(--orange);border-color:var(--orange)} [data-pora="telefon"] .site-tel:hover{background:var(--orange-dark)} /* 🔴 Korekta 2026-08-17 po zgloszeniu operatora: „na pompach widze u gory tylko numer, a my zachecamy raczej zeby wyslac zapytanie". Zmierzone i tak bylo: w godzinach pracy przycisk zapytania mial tlo PRZEZROCZYSTE, czyli byl samym konturem na ciemnej belce, przy pomaranczowym numerze obok. Wygladalo to jak jeden przycisk i jedna ozdoba. To bylo wykonanie zasady z 14.08 ponad jej tresc: mowi ona, ze w godzinach pracy telefon jest wezwaniem PIERWSZYM, a nie ze zapytanie ma zniknac. Oba sa teraz pelnoprawnymi przyciskami, a warstwa pory dnia przelacza wylacznie to, KTORY z nich jest pomaranczowy. Uklad odpowiada temu z zywego silosu klimatyzacji, ktory operator wskazal jako wzorzec. */ [data-pora="telefon"] .site-cta{background:var(--blue-dark);color:#fff;border:1.5px solid rgba(255,255,255,.35)} [data-pora="telefon"] .site-cta:hover{background:#0e3c6b;color:#fff} /* Zdania widoczne WYLACZNIE w swoim stanie. Domyslnie schowane, wiec przy wylaczonym JavaScripcie nie pojawia sie zadne, a przy wlaczonym wlasciwe jest juz na miejscu przed pierwszym malowaniem. Nie zastepuja niczego, tylko dochodza. */ .poza-godzinami,.w-godzinach-mailem{display:none} [data-pora="poza"] .poza-godzinami{display:block} [data-pora="mail"] .w-godzinach-mailem{display:block} /* Mobile: logo + telefon w jednym rzedzie (telefon prawo), nawigacja schodzi pod spod (osobny rzad), zeby sticky naglowek nie urosl. order: logo(0) < telefon(2) < nav(3). */ @media(max-width:560px){ .site-tel{font-size:15px;padding:6px 12px;gap:6px} header.site .site-actions{order:2} header.site .crumbs{order:3;flex-basis:100%;justify-content:center;gap:2px 4px} header.site .crumbs a{padding:6px 10px;font-size:13.5px} } /* Stale widoczny przycisk-CTA (lead). Klient ma akcje "Wyslij zapytanie" pod reka na kazdej wysokosci scrolla. Desktop: przycisk w sticky-naglowku obok telefonu (telefon+CTA zbite w prawy klaster). Mobile: znika z naglowka (za ciasno) i przenosi sie na przyklejony dolny pasek. Pasek jest position:fixed, wiec nie przesuwa ukladu (zero CLS), a numer '506637703' jest pre-renderowany, wiec DNI (podmiana numeru dla ruchu z reklam) dziala tak jak w naglowku. */ /* telefon + CTA jako jeden klaster po prawej: zawijaja sie razem, nie osobno */ .site-actions{display:inline-flex;align-items:center;gap:8px;margin-left:auto} .site-cta{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none; background:var(--orange);color:#fff;font-weight:800;font-size:15px;letter-spacing:.2px; padding:8px 14px;border-radius:10px;transition:background .12s} .site-cta:hover{background:var(--orange-dark);color:#fff} .cta-dock{display:none} @media(max-width:560px){ .site-cta{display:none} .cta-dock{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60; padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.97);border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(9,28,52,.14)} .cta-dock a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px; text-decoration:none;font-weight:800;font-size:16px;letter-spacing:.3px; padding:12px 8px;border-radius:10px;white-space:nowrap} .cta-dock__tel{color:var(--blue);background:#fff;border:1.5px solid var(--blue)} .cta-dock__tel::before{content:"\260E";font-size:17px;line-height:1} .cta-dock__lead{background:var(--orange);color:#fff} /* W GODZINACH PRACY telefon staje sie wezwaniem pierwszym, poza nimi zostaje formularz. Zasada operatora z 2026-08-14: rozmowa zamyka sprzedaz szybciej niz wymiana maili, ale o dwudziestej drugiej numer telefonu jest slepa uliczka. Zmieniamy WYLACZNIE kolory, nie rozmiary i nie kolejnosc w kodzie, wiec nie ma czym przeskoczyc ukladowi. Brak atrybutu (wylaczony JavaScript) = uklad domyslny, oba wezwania rownorzedne. */ [data-pora="telefon"] .cta-dock__tel{background:var(--orange);color:#fff;border-color:var(--orange)} /* Ten sam powod co przy belce (2026-08-17): blade tlo robilo z „Wyslij zapytanie" napis, a nie przycisk, i to na pasku, ktory na telefonie jest widoczny przez cale przewijanie. Granatowy solid zostawia telefonowi pierwszenstwo i nie kasuje drugiej drogi. */ [data-pora="telefon"] .cta-dock__lead{background:var(--blue-dark);color:#fff;border:1.5px solid var(--blue-dark)} .cta-dock--produkt .cta-dock__buy{flex:1;background:var(--orange);color:#fff} .cta-dock--produkt .cta-dock__ask{flex:1;background:#eef4fb;color:var(--blue);border:1px solid #cfe0f2} .cta-dock--produkt .cta-dock__buy,.cta-dock--produkt .cta-dock__ask{font-size:14px} .cta-dock--produkt .cta-dock__tel{flex:0 0 48px;font-size:0} body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))} } /* Okruszki (breadcrumbs): widoczna sciezka "gdzie jestem" + powrot na adapia.pl i do huba sekcji. Pre-render (zero CLS). Wyrownane do kolumny tresci (1000px), jak naglowek. */ .breadcrumb{background:var(--card);border-bottom:1px solid var(--line);font-size:13px} .breadcrumb .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;padding:9px 20px} .breadcrumb a{color:var(--blue);text-decoration:none} .breadcrumb a:hover{text-decoration:underline} .breadcrumb .sep{color:var(--muted)} .breadcrumb .breadcrumb-cur{color:var(--ink);font-weight:700} /* hero: ciemny granat jak na stronie glownej (gradient marki pod ciemnym przyciemnieniem). Ten sam uklad warstw co .hero-home, zeby podstrony mialy spojny, glebszy kolor. */ .hero{color:#fff;padding:54px 0 48px; background: radial-gradient(120% 95% at 84% 6%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%), linear-gradient(90deg, rgba(9,28,52,.88) 0%, rgba(9,28,52,.66) 52%, rgba(9,28,52,.44) 100%), linear-gradient(135deg,#1e72bd 0%, var(--blue) 46%, var(--blue-dark) 100%)} /* Wariant hero ze zdjeciem w tle (jak na stronie glownej: foto = tlo elementu, gradient = ::before). Strona ustawia INLINE style="background-image:url('assets/hero/X.webp')" - url wzgledem DOKUMENTU (NIE przez zmienna CSS + var(): wtedy url rozwiazuje sie wzgledem arkusza /assets/ -> 404). Zdjecie WIDOCZNE z prawej (naturalne kolory + detal), ciemny gradient tylko z lewej pod tekst + lekki tint. */ .hero--foto{position:relative;overflow:hidden; background-size:cover;background-position:center;background-repeat:no-repeat} /* 🔑 KOMPOZYCJA HERO (rozstrzygniecie operatora 2026-08-16): motyw zdjecia po PRAWEJ, spokojne tlo po LEWEJ, pod tekstem. Domyka siedem osobnych zgloszen o hero, bo wszystkie mowily to samo innymi slowami: motyw wpada pod napis, wiec hero nie pokazuje niczego. Do 16.08 gradient schodzil z .93 do .50, czyli prawa polowa tez byla przyciemniona o polowe i zdjecie bylo tam ledwo czytelne. Teraz lewa strona jest niemal krycia (pole pod tekst), a prawa schodzi do .12, wiec kadr jest widoczny w naturalnych kolorach. Jedna zmiana obejmuje wszystkie hero w serwisie naraz, bez ruszania ani jednego kadru. */ .hero--foto::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: linear-gradient(90deg, rgba(7,20,38,.96) 0%, rgba(8,24,46,.92) 28%, rgba(9,30,58,.62) 58%, rgba(10,36,66,.28) 82%, rgba(10,36,66,.12) 100%), linear-gradient(0deg, rgba(20,72,134,.22), rgba(20,72,134,.22))} /* Tint hero w kolorze kategorii. Hero jest najwiekszym elementem kazdej strony i pierwsza rzecza, ktora klient widzi, wiec to tutaj kolor sekcji ma najwieksza sile orientacyjna. Podmieniana jest WYLACZNIE druga warstwa (ta, ktora dotad byla stalym niebieskim tintem); ciemny gradient pod tekstem zostaje bez zmian, wiec czytelnosc bialego napisu jest ta sama. @supports jest tu bramka, a nie ozdoba: bez color-mix cala deklaracja `background` bylaby niepoprawna i hero zostaloby BEZ ciemnego gradientu, czyli z bialym tekstem na zdjeciu. Ze wsparciem wchodzi tint kategorii, bez niego zostaje niebieski sprzed 2026-08-16. */ @supports (color: color-mix(in srgb, red 20%, transparent)){ .hero--foto::before{background: linear-gradient(90deg, rgba(7,20,38,.96) 0%, rgba(8,24,46,.92) 28%, rgba(9,30,58,.62) 58%, rgba(10,36,66,.28) 82%, rgba(10,36,66,.12) 100%), linear-gradient(0deg, color-mix(in srgb, var(--akcent) 30%, transparent), color-mix(in srgb, var(--akcent) 30%, transparent))} } /* 🔴 MOBILE FIRST jest zasada nadrzedna nr 1, a gradient poziomy jest jej wrogiem: na waskim ekranie tekst zajmuje CALA szerokosc, wiec przejasniona prawa strona wypada dokladnie pod napisem. Ponizej 720 px wraca wiec przyciemnienie rownomierne, lekko mocniejsze u gory, gdzie stoi naglowek. Zdjecie zostaje widoczne, ale nie kosztem czytelnosci. */ @media(max-width:720px){ .hero--foto::before{background: linear-gradient(180deg, rgba(7,20,38,.92) 0%, rgba(8,24,46,.86) 55%, rgba(9,30,58,.80) 100%), linear-gradient(0deg, rgba(20,72,134,.22), rgba(20,72,134,.22))} } @supports (color: color-mix(in srgb, red 20%, transparent)){ @media(max-width:720px){ .hero--foto::before{background: linear-gradient(180deg, rgba(7,20,38,.92) 0%, rgba(8,24,46,.86) 55%, rgba(9,30,58,.80) 100%), linear-gradient(0deg, color-mix(in srgb, var(--akcent) 30%, transparent), color-mix(in srgb, var(--akcent) 30%, transparent))} } } .hero--foto>.wrap{position:relative;z-index:1} /* Kolumna tekstu hero ma sie miescic w lewej, przyciemnionej polowie. Bez tego ograniczenia naglowek siegal 79% szerokosci (zmierzone 2026-08-16 na 1440 px), czyli wchodzil dokladnie w te czesc kadru, ktora gradient poziomy oddaje zdjeciu. Lead mial swoj limit od poczatku i dlatego nigdy nie sprawial klopotu; naglowek go nie mial. */ .hero h1{font-size:34px;line-height:1.2;margin:0 0 14px;font-weight:800;max-width:700px} .hero p.lead{font-size:19px;max-width:680px;margin:0 0 24px;color:#eaf2fb} /* Data publikacji wpisu, widoczna dla czytelnika. Stoi POD naglowkiem, a nie na koncu tekstu, bo odpowiada na pytanie zadawane przed czytaniem, nie po: czy to jeszcze aktualne. */ .hero .hero-meta{font-size:13.5px;color:#c9dcf0;margin:-6px 0 14px;letter-spacing:.01em} /* Para przyciskow (wyslij zapytanie + zadzwon). Regula BAZOWA, nie tylko w hero: klasa powstala w hero i tam dostala flexa, a potem zaczela byc uzywana w tresci stron, gdzie zostala zwyklym blokiem. Przyciski sa `inline-block`, wiec po zawinieciu na waskim ekranie sklejaly sie pionowo bez odstepu (zgloszone ze zrzutu z telefonu 2026-08-16). Dotyczylo 324 miejsc na 167 stronach, czyli calego serwisu, a nie jednej strony. */ .cta-row{display:flex;gap:12px;flex-wrap:wrap} .hero .cta-row{display:flex;gap:12px;flex-wrap:wrap} .btn{display:inline-block;border:none;border-radius:8px;padding:13px 22px;font-size:16px; font-weight:700;cursor:pointer;text-decoration:none} /* Para przyciskow postawiona w akapicie (130 takich miejsc na 160 stronach) jest rozdzielona zwykla spacja. Na szerokim ekranie wystarcza, ale po zawinieciu na telefonie przyciski sklejaja sie pionowo, bo `inline-block` nie ma zadnego odstepu w pionie. Regula celuje w `p > .btn`, wiec NIE dotyka `.cta-row`, ktora jest flexem z wlasnym `gap`. Zgloszone trzema zrzutami z telefonu 2026-08-16. */ p > .btn{margin-bottom:8px} .btn-orange{background:var(--orange);color:#fff} .btn-orange:hover{background:var(--orange-dark)} /* Przyciski drugorzedne: SOLIDNE niebieskie tlo + bialy napis (jak pierwotnie), nigdy przeswitujace - czytelne tez na hero ze zdjeciem. Subtelny bialy kant dla delinacji na blekicie. */ .btn-ghost{background:var(--blue-dark);color:#fff} .btn-ghost:hover{background:#0e3c6b} /* "Na raty" (finansowanie): zielony akcent, odklejony od pomaranczowego CTA i granatowych ghostow. "Na raty" w rozmiarze bazowym, "(od 90 zl/mc)" mniejsza czcionka w nawiasie (.raty-od). */ .btn-raty{background:#1f7a4d;color:#fff} .btn-raty:hover{background:#19643f} .btn-raty .raty-od{font-size:.72em;font-weight:600;opacity:.92} /* Biala obwodka na przyciskach w hero (home + podstrony) - operator 2026-06-19: czytelne, spojne kanty na ciemnym/zdjeciowym tle. box-sizing:border-box, wiec rozmiar bez zmian. */ .hero .btn-orange,.hero .btn-ghost,.hero .btn-raty, .hero-home .btn-orange,.hero-home .btn-ghost,.hero-home .btn-raty{border:2px solid #fff} /* sekcje */ section{padding:38px 0;border-bottom:1px solid var(--line)} section h2{color:var(--akcent);font-size:25px;margin:0 0 16px;font-weight:800} section h3{color:var(--ink);font-size:19px;margin:22px 0 8px} p{margin:0 0 14px} a{color:var(--blue)} .muted{color:var(--muted)} .small{font-size:14px} /* karty atutów */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px} .card h3{margin-top:0;color:var(--akcent)} /* Przyciski kart stoja w jednej linii niezaleznie od dlugosci tekstu (zgloszone 2026-08-16 dwa razy, przy termomodernizacji i przy kontakcie, wiec to regula ogolna dla kazdej siatki kart, a nie poprawka jednej sekcji). Karta jest kolumna elastyczna, a akapit z przyciskiem dosuwa sie do dolu. Alternatywa, czyli skracanie tekstow pod uklad, psulaby tresc. */ .grid2>.card{display:flex;flex-direction:column} .card__akcja{margin-top:auto;margin-bottom:0;padding-top:6px} /* Znacznik kierunku przy przycisku, ktory PROWADZI DALEJ (a nie zamawia). Kolor sam tego nie mowi: operator pytal o niego dwa razy w jednym przegladzie, przy dwoch roznych sekcjach, wiec skoro autor serwisu nie rozpoznaje wlasnej konwencji, klient nie ma szans. Strzalka wchodzi tylko w kartach, bo tam przycisk jest JEDYNY i nie ma go z czym porownac; w hero granatowy stoi obok pomaranczowego i rola obu jest widoczna z ukladu. */ .card .btn-ghost::after{content:"\2192";margin-left:9px;font-weight:700;opacity:.9} /* Karta prowadzaca do innej sekcji niesie JEJ barwe, nie barwe strony, na ktorej stoi. Pionowy pasek z lewej dziala tak samo w siatce dwukolumnowej i w kolumnie na telefonie, gdzie karty ustawiaja sie jedna pod druga: powstaje wtedy czytelna legenda kolorow. Grubosc paska wchodzi w miejsce ramki 1 px, wiec tresc przesuwa sie o 3 px i nic nie skacze. */ .card--kategoria{border-left:4px solid var(--akcent)} /* Rozdzielacz ruchu po sytuacji klienta (strona glowna, 2026-08-16). Cel: klient ma w kilka sekund trafic do swojej sprawy, takze wtedy, gdy nie zna nazwy uslugi. Uklad jednokolumnowy na kazdej szerokosci, bo to lista decyzji, a nie katalog: czyta sie ja z gory na dol i pierwsza pasujaca pozycja konczy szukanie. Cel dotkniecia ma 60 px wysokosci przy dwoch liniach tekstu, czyli powyzej progu wygodnego kliknięcia kciukiem. */ .rozdzielacz{list-style:none;margin:0;padding:0;display:grid;gap:8px} .rozdzielacz a{display:block;background:var(--card);border:1px solid var(--line); border-left:4px solid var(--akcent);border-radius:10px;padding:13px 16px; text-decoration:none;color:var(--ink);transition:background .12s,border-color .12s} .rozdzielacz a:hover{background:var(--akcent-tlo);border-color:var(--akcent)} .rozdzielacz b{display:block;color:var(--akcent);font-size:17px;line-height:1.3} .rozdzielacz span{display:block;color:var(--muted);font-size:14.5px;line-height:1.45;margin-top:2px} /* Siatka wszystkich uslug. Jedenascie pozycji rownorzednych, kazda w barwie swojego silosu: to jest jednoczesnie spis tresci serwisu i legenda kodu kolorystycznego. Dwie kolumny od 620 px, jedna nizej. Na telefonie kafel ma dwie linie i okolo 66 px, wiec cala jedenastka miesci sie w dwoch ekranach, zamiast dwunastu kart z akapitami. */ .uslugi{display:grid;grid-template-columns:1fr;gap:9px} .usluga{display:block;background:var(--card);border:1px solid var(--line); border-left:4px solid var(--akcent);border-radius:10px;padding:11px 14px; text-decoration:none;color:var(--ink);transition:background .12s,border-color .12s} .usluga:hover{background:var(--akcent-tlo);border-color:var(--akcent)} .usluga__nazwa{display:block;font-weight:800;color:var(--akcent);font-size:16px;line-height:1.3} .usluga__opis{display:block;color:var(--muted);font-size:14px;line-height:1.4;margin-top:1px} @media(min-width:620px){.uslugi{grid-template-columns:1fr 1fr;gap:10px}} /* tabela doboru */ table.dobor{width:100%;border-collapse:collapse;margin:8px 0 10px;background:var(--card); border:1px solid var(--line);border-radius:10px;overflow:hidden} table.dobor th,table.dobor td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:15px} table.dobor th{background:var(--akcent-tlo);color:var(--ink);font-weight:700} table.dobor tr:last-child td{border-bottom:none} /* Mobile: tabela nie moze rozpychac strony (auto-layout liczy min-content szerszy niz telefon, co rozszerza layout viewport i przesuwa przyklejony dolny pasek poza ekran). table-layout:fixed trzyma ja na 100% szerokosci kolumny tresci, tekst sie zawija. */ @media(max-width:560px){ table.dobor{table-layout:fixed} table.dobor th,table.dobor td{padding:9px 7px;font-size:13.5px;overflow-wrap:break-word} } /* Cennik serwisu: wiersz-naglowek grupy uslug. Cennik zrodlowy jest plaska lista dwunastu pozycji z czterech roznych swiatow (fotowoltaika, elektryka, pompy, klimatyzacja), wiec klient szukajacy swojej uslugi czytal cala tabele. Kwoty i ich kolejnosc bez zmian. */ table.dobor tr.grupa th{background:#f7fafd;color:var(--muted);font-size:13px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;padding-top:14px} .cennik-serwis td:nth-child(2),.cennik-serwis td:nth-child(3){white-space:normal} @media(min-width:561px){.cennik-serwis td:nth-child(2),.cennik-serwis td:nth-child(3){width:26%}} .disc{font-size:13.5px;color:var(--muted);background:#fff8f2;border:1px solid #f6d7b8; border-radius:8px;padding:11px 14px;margin-top:6px} .raty-notka{font-size:14px;color:var(--ink);background:#eef4fb;border-left:3px solid var(--blue); border-radius:6px;padding:10px 14px;margin:12px 0} .raty-notka a{color:var(--blue);font-weight:700} /* teaser raty pod ceną: drugoplanowy, ale wyróżniony pomarańczem, żeby nie zlewał się z ceną i "dla firmy" */ .rata-od{display:block;font-size:13px;color:var(--orange-dark);font-weight:700;margin-top:4px;line-height:1.3} .rata-od a{color:var(--orange-dark);text-decoration:none;padding:0 1px} /* w kaflach "Nasz wybor" kolumny sa waskie: mniejsza czcionka + jeden wiersz (spojnie we wszystkich) */ .kafel .rata-od{font-size:11.5px;white-space:nowrap;letter-spacing:-.1px;margin-top:6px} td.od .rata-od{white-space:nowrap} td.od .rata-od{font-weight:600} .ms-nazwa a{color:var(--blue);text-decoration:none} .ms-nazwa a:hover{text-decoration:underline} /* etykieta informacyjna "kompaktowa jednostka" — odrebna od plakietek rekomendacji i metek statusu */ .tag-kompakt{display:inline-block;font-size:11px;font-weight:700;color:var(--blue);background:#eef4fb; border:1px solid #cfe0f2;border-radius:6px;padding:1px 7px;margin-left:6px;vertical-align:middle;white-space:nowrap} .tag-kompakt::before{content:"\2194 "} /* etykieta "mrozoodporna" - dla serii z deklarowanym grzaniem <=-25C (spec 2026-06-08) */ .tag-zima{display:inline-block;font-size:11px;font-weight:700;color:#0d4a6e;background:#e0f0ff; border:1px solid #a6cee0;border-radius:6px;padding:1px 7px;margin-left:6px;vertical-align:middle;white-space:nowrap} .tag-zima::before{content:"❄ "} /* wiersz metek statusu - male zawieszki obok siebie, z wyrazna przerwa od plakietki rekomendacji */ .metki-row{display:inline-flex;flex-wrap:wrap;gap:8px;vertical-align:middle;align-self:flex-start} /* stale miejsce na metki w kaflu - rezerwowane tez gdy metki brak, by zdjecia byly w jednym rzedzie */ .kafel-metki{min-height:30px;margin-top:9px;display:flex;align-items:flex-start} .kafel .metki-row{margin:0} /* metka statusu = mala zawieszka-TAG z zabkiem i dziurka - wizualnie inna niz pasek-plakietka */ .metka{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#fff; padding:4px 11px 4px 18px;line-height:1;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap; clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%); box-shadow:0 2px 5px rgba(0,0,0,.3);position:relative} .metka::after{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%); width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.92)} .metka::before{font-size:11px;font-weight:900;line-height:1} .metka-promocja{background:linear-gradient(135deg,#fb5a4b,#d4211b)} .metka-promocja::before{content:"%"} .metka-nowosc{background:linear-gradient(135deg,#17b8a8,#0e9384)} .metka-nowosc_promocja{background:linear-gradient(135deg,#fb5a4b,#d4211b)} .metka-nowosc_promocja::before{content:"%"} .metka-nowosc::before{content:"\2726"} /* cena przekreslona (bazowa) + promocyjna */ .cena-stara{text-decoration:line-through;color:var(--muted);font-weight:600;margin-right:8px;font-size:.86em} .cena-promo{color:#e23b3b;font-weight:800} /* lista z haczykami */ ul.ticks{list-style:none;padding:0;margin:6px 0;display:grid;gap:10px} ul.ticks li{position:relative;padding:2px 0 2px 30px;font-size:15.5px} ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--orange);font-weight:700} /* proces */ ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} ol.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line); border-radius:10px;padding:16px 18px 16px 52px;position:relative} ol.steps li::before{content:counter(s);position:absolute;left:14px;top:14px;width:26px;height:26px; background:var(--orange);color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px} /* dzielnice */ /* Odstep DOLNY jest tu tak samo wazny jak gorny: po liscie marek stoi zwykle przycisk, ktory bez tego przykleja sie do ostatniego chipa (zgloszone ze zrzutu z telefonu 2026-08-16). Dotyczy 13 stron. */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px} .chip{background:var(--akcent-tlo);color:var(--ink);border-radius:20px;padding:6px 13px;font-size:14px;text-decoration:none} .chip:hover{background:#dce8f6} .chip.soon{background:#f0f2f4;color:var(--muted)} /* faq */ details.faq{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:10px} details.faq summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px} details.faq summary::after{content:"+";color:var(--orange);font-weight:800} details.faq[open] summary::after{content:"–"} details.faq .a{padding:0 18px 16px;color:#33424f} /* cta box */ .ctabox{background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;border-radius:14px;padding:30px 28px;text-align:center} .ctabox h2{color:#fff;margin-top:0} .ctabox p{color:#fff2e6;max-width:560px;margin:0 auto 20px} /* stopka */ footer.site{background:#12233a;color:#b8c6d6;font-size:14px;padding:26px 0;border-top:3px solid var(--akcent)} footer.site a{color:#dbe7f3} /* ---- karta produktu ---- */ .prod-top{display:grid;grid-template-columns:420px 1fr;gap:30px;padding:34px 0} .prod-photo{background:var(--card);border:1px solid var(--line);border-radius:14px; aspect-ratio:1/1;display:grid;place-items:center;color:var(--muted);text-align:center;padding:20px} .prod-photo .ph{font-size:14px} .badge{display:inline-block;background:var(--orange);color:#fff;font-size:13px;font-weight:700; border-radius:20px;padding:4px 12px;margin-bottom:10px} .prod-top h1{font-size:27px;color:var(--ink);margin:0 0 6px;line-height:1.25} .prod-sub{color:var(--muted);margin:0 0 18px} .pricebox{background:#eef4fb;border:1px solid #cfe0f2;border-radius:12px;padding:18px 20px;margin:0 0 16px} .pricebox .big{font-size:32px;font-weight:800;color:var(--akcent)} .pricebox .big small{font-size:15px;font-weight:600;color:var(--muted)} .pricebox .firma{color:var(--muted);font-size:15px;margin-top:4px} .pricebox .star{font-size:12.5px;color:var(--muted);margin-top:8px} .prod-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .prod-quick{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px} .prod-quick li{font-size:14.5px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px} .prod-quick b{color:var(--blue)} /* tabela spec */ table.spec{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line); border-radius:10px;overflow:hidden;margin:6px 0 4px} table.spec td{padding:9px 14px;border-bottom:1px solid var(--line);font-size:14.5px} table.spec td:first-child{color:var(--muted);width:48%} table.spec td:last-child{font-weight:600} table.spec tr:last-child td{border-bottom:none} .spec-grp{color:var(--blue);font-weight:700;font-size:15px;margin:18px 0 6px} .opinia-inst{background:#fff8f2;border:1px solid #f6d7b8;border-radius:12px;padding:18px 22px} .opinia-inst .who{font-size:13.5px;color:var(--orange-dark);font-weight:700;margin-bottom:6px} .energy{display:flex;gap:14px;flex-wrap:wrap} .energy .e{flex:1;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px} .energy .e .n{font-size:22px;font-weight:800;color:var(--blue)} @media(max-width:720px){ .grid2,ol.steps,.prod-quick{grid-template-columns:1fr} .prod-top{grid-template-columns:1fr} .hero h1{font-size:27px} } /* zdjecia jednostek (demo: katalogowe; placeholder gdy brak pliku) */ .prod-photo img{width:100%;height:auto;border-radius:10px;display:block} .kafel-foto img{max-width:100%;max-height:86px;object-fit:contain;display:block} /* ===== Strona glowna: hero + pas benefitow (2026-06-17) ===== Osobne klasy pod homepage. NIE ruszamy wspoldzielonej klasy .hero (uzywa jej ~195 stron). */ .hero-home{position:relative;overflow:hidden;color:#fff} .hero-home__bg{position:absolute;inset:0;z-index:1; background: radial-gradient(120% 95% at 84% 6%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%), linear-gradient(135deg,#1e72bd 0%,var(--blue) 46%,var(--blue-dark) 100%)} /* delikatna grafika nawiewu (inline SVG w HTML), prawa strona; zero pliku */ .hero-home__art{position:absolute;top:0;right:0;height:100%;width:auto;z-index:2; opacity:.55;pointer-events:none} /* slot na realne zdjecie montazu: aktywne dopiero gdy operator doda w