/* ============================================================ POZE.CSS — design system Panel OZE / lifting premium Źródło decyzji: design-system/ZASADY-PREMIUM-UI-2026-07-04.md (kanty 7a, głębia v2 + kształty v4 = 7b, komponenty E15-E18) Zatwierdzone wizualnie przez AL 04.07.2026 (demo :8811). ============================================================ */ :root{ --pz-green:#00b5b0; --pz-green-d:#007672; --pz-navy:#011627; --pz-ink:#22333b; --pz-mut:#5b6c6a; --pz-mut-l:#7d918e; --pz-line:#e2eae8; --pz-bg-soft:#f2f7f6; /* kanty (7a) */ --pz-r-card:8px; --pz-r-ctrl:6px; --pz-r-pill:7px; /* głębia v2 (7b): kontakt / średni / daleki */ --pz-elev-bar:0 1px 2px rgba(1,22,39,.06),0 6px 14px -6px rgba(1,22,39,.12),0 18px 38px -18px rgba(1,22,39,.28); --pz-elev-card:0 1px 2px rgba(1,22,39,.05),0 10px 22px -10px rgba(1,22,39,.16),0 26px 52px -24px rgba(1,22,39,.30); --pz-elev-hero:0 2px 5px rgba(1,22,39,.06),0 18px 36px -16px rgba(1,22,39,.24),0 44px 88px -36px rgba(1,22,39,.34),0 36px 72px -30px rgba(0,181,176,.22); --pz-elev-map:0 3px 8px rgba(1,22,39,.10),0 24px 48px -20px rgba(1,22,39,.32),0 48px 96px -40px rgba(1,22,39,.38); --pz-elev-cta:0 3px 8px rgba(0,120,116,.22),0 14px 30px -10px rgba(0,181,176,.45); } /* tło strony z perspektywą — klasa opt-in na body */ body.pz-depth{background:linear-gradient(180deg,#f8fcfb 0%,#e9f1f0 45%,#dfe9e8 100%) fixed} /* ---------- komponent główny: karta Panelu (SZYBA / scalona) ---------- */ .poze{position:relative;max-width:1180px;margin:18px auto;padding:18px 22px 16px; background:linear-gradient(180deg,#ffffff 0%,#f6fbfa 100%); border:1px solid rgba(0,181,176,.40);border-radius:var(--pz-r-card);box-shadow:var(--pz-elev-hero)} .poze::before{content:"";position:absolute;inset:0 0 auto 0;height:2.5px;border-radius:var(--pz-r-card) var(--pz-r-card) 0 0; background:linear-gradient(90deg,var(--pz-green),rgba(0,181,176,.15))} .poze-head{display:flex;align-items:center;gap:10px;margin-bottom:12px} .poze-lock{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px; border-radius:var(--pz-r-pill);background:linear-gradient(160deg,#0b2233,var(--pz-navy));color:#33c4c0} .poze-lock svg{display:block} .poze-kick{font:800 12px 'Lato',sans-serif;letter-spacing:.10em;text-transform:uppercase;color:var(--pz-green-d)} .poze-kick small{display:block;font:400 11.5px 'Lato',sans-serif;letter-spacing:0;text-transform:none;color:var(--pz-mut);margin-top:1px} .poze-pill{margin-left:auto;font:800 10.5px 'Lato',sans-serif;letter-spacing:.08em;text-transform:uppercase; color:var(--pz-green-d);background:#fff;border:1px solid rgba(0,181,176,.45);border-radius:var(--pz-r-pill);padding:5px 12px;white-space:nowrap} /* korpus: tabela pod szybą + panel boczny */ .poze-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px} @media(max-width:900px){.poze-body{grid-template-columns:1fr}} .poze-glass{position:relative;border:1px solid var(--pz-line);border-radius:var(--pz-r-card);overflow:hidden;background:#fff} .poze-glass table{width:100%;border-collapse:collapse;font:400 12.5px 'Lato',sans-serif} .poze-glass th{font:800 10.5px 'Lato',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--pz-mut); text-align:left;padding:10px 14px;border-bottom:1px solid var(--pz-line);background:#fbfdfd} .poze-glass td{padding:10px 14px;border-bottom:1px solid rgba(226,234,232,.55);color:var(--pz-ink)} .poze-glass tbody tr:nth-child(even){background:rgba(0,181,176,.035)} /* progresywne rozmycie wierszy (E15) */ .poze-r1 td{filter:blur(2.2px)} .poze-r2 td{filter:blur(3.2px)} .poze-r3 td{filter:blur(4.2px)} .poze-r4 td{filter:blur(5.5px)} .poze-veil{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0) 28%,rgba(246,251,250,.55) 70%,rgba(242,250,249,.85) 100%)} .poze-shine{position:absolute;inset:0;pointer-events:none;overflow:hidden} .poze-shine::after{content:"";position:absolute;top:-30%;bottom:-30%;width:34%;left:-40%;transform:rotate(10deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); animation:pzShine 4.2s ease-in-out infinite} @keyframes pzShine{0%{left:-45%}60%,100%{left:115%}} @media (prefers-reduced-motion: reduce){.poze-shine::after{animation:none}} .poze-glassfoot{position:relative;padding:9px 14px;background:#fbfdfd;border-top:1px solid var(--pz-line)} .poze-count{font:800 12.5px 'Lato',sans-serif;color:var(--pz-green-d)} .poze-count small{font:400 11px 'Lato',sans-serif;color:var(--pz-mut)} .poze-side{display:flex;flex-direction:column;gap:10px;min-width:0} .poze-spark{border:1px solid var(--pz-line);border-radius:var(--pz-r-card);background:#fff;padding:12px 14px} .poze-spark .cap{display:flex;align-items:center;gap:8px;font:700 12px 'Lato',sans-serif;color:var(--pz-ink);margin-bottom:8px} .poze-spark svg{width:100%;height:auto;display:block} .poze-spark .lbl{display:flex;justify-content:space-between;font:400 10px 'Lato',sans-serif;color:var(--pz-mut);margin-top:4px} .poze-konkret{font:400 13px/1.6 'Lato',sans-serif;color:var(--pz-ink)} .poze-konkret b{color:var(--pz-navy)} /* korzyści (maks 3, E15) */ .poze-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 4px; padding-top:12px;border-top:1px dashed rgba(0,181,176,.35)} @media(max-width:760px){.poze-perks{grid-template-columns:1fr}} .poze-perk .ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:var(--pz-r-pill);background:rgba(0,181,176,.10);color:var(--pz-green-d);vertical-align:middle;margin-right:7px} .poze-perk .ic svg{display:block} .poze-perk b{font:900 12.5px 'Lato',sans-serif;color:var(--pz-ink)} .poze-perk span.d{display:block;font:400 11.5px/1.5 'Lato',sans-serif;color:var(--pz-mut);margin:3px 0 0 33px} /* stopka karty: jedno CTA + zaufanie (E15, zasada 6-7 komunikacji) */ .poze-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px} .poze-cta{display:inline-flex;align-items:center;gap:8px;font:800 13.5px 'Lato',sans-serif;color:#fff;text-decoration:none; background:linear-gradient(135deg,#00c4be,#009a95);border-radius:var(--pz-r-ctrl);padding:12px 22px; box-shadow:var(--pz-elev-cta);transition:transform .2s,box-shadow .2s;cursor:pointer} .poze-cta:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,120,116,.28),0 20px 44px -12px rgba(0,181,176,.55)} .poze-cta .ar{transition:transform .2s} .poze-cta:hover .ar{transform:translateX(3px)} .poze-trust{font:400 11.5px/1.6 'Lato',sans-serif;color:var(--pz-mut)} .poze-trust b{color:var(--pz-ink)} .poze-trust .ok{color:#1f7d34;margin-right:2px} /* chip statusu w tabelach */ .poze-chipok{display:inline-block;font:700 11px 'Lato',sans-serif;color:#1f7d34;background:#e3f4ea; border-radius:var(--pz-r-pill);padding:2px 9px} /* ---------- KPI-TRÓJKA (E16) ---------- */ .kpi3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0} @media(max-width:760px){.kpi3{grid-template-columns:1fr}} .kpi3>div{display:flex;flex-direction:column;min-height:96px;border-radius:var(--pz-r-card); background:linear-gradient(180deg,#ffffff,#fbfdfd);padding:12px 16px;box-shadow:var(--pz-elev-card); transition:transform .2s,box-shadow .2s} .kpi3>div:hover{transform:translateY(-2px)} @media (prefers-reduced-motion: reduce){.kpi3>div:hover{transform:none}} .kpi3 .l{font:800 10px 'Lato',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--pz-mut-l);margin-bottom:2px} .kpi3 .v{font:900 21px 'Lato',sans-serif;color:var(--pz-navy);font-variant-numeric:tabular-nums;margin:2px 0 1px} .kpi3 .v small{font-size:11px;font-weight:800;color:var(--pz-green-d)} .kpi3 .d{font:400 11px/1.5 'Lato',sans-serif;color:var(--pz-mut);margin-top:auto} /* ---------- SLIM / mostek (E17) ---------- */ .poze-slim{display:flex;align-items:center;gap:12px;max-width:1180px;margin:14px auto;padding:11px 16px; background:linear-gradient(180deg,#ffffff,#f6fbfa);border:1px solid rgba(0,181,176,.40); border-radius:var(--pz-r-card);box-shadow:var(--pz-elev-bar)} .poze-slim .poze-lock{width:24px;height:24px;flex:0 0 24px} .poze-slim p{flex:1;min-width:0;font:400 12.5px/1.55 'Lato',sans-serif;color:var(--pz-ink);margin:0} .poze-slim b{color:var(--pz-green-d)} .poze-slim a{font:800 12.5px 'Lato',sans-serif;color:var(--pz-green-d);text-decoration:none;white-space:nowrap} .poze-slim a:hover{text-decoration:underline} /* ---------- belka kwadracików przy mapie (14b + decyzja 21:05) ---------- */ .poze-mapbar{max-width:1180px;margin:10px auto;background:rgba(255,255,255,.82); backdrop-filter:blur(8px) saturate(1.15);-webkit-backdrop-filter:blur(8px) saturate(1.15); border:1px solid rgba(226,234,232,.9);border-radius:var(--pz-r-card);padding:10px 16px 12px;box-shadow:var(--pz-elev-bar)} .poze-mapbar>span{display:block;font:800 10px 'Lato',sans-serif;letter-spacing:.09em;text-transform:uppercase; color:#8aa39f;margin-bottom:8px} .poze-tiles{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin:0} @media(max-width:1100px){.poze-tiles{grid-template-columns:repeat(5,1fr)}} @media(max-width:640px){.poze-tiles{grid-template-columns:repeat(3,1fr)}} .poze-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px; background:linear-gradient(180deg,#fdfffe,#f4faf9);border:0;border-radius:var(--pz-r-card); padding:10px 6px 8px;min-height:86px;cursor:pointer; box-shadow:0 1px 2px rgba(1,22,39,.05),0 6px 14px -8px rgba(1,22,39,.18); transition:transform .2s,box-shadow .2s,border-color .2s} .poze-tile:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(1,22,39,.06),0 12px 26px -10px rgba(0,181,176,.35)} .poze-tile.on,.poze-tile:focus-visible{background:linear-gradient(160deg,#0b2233,var(--pz-navy));color:#fff;outline:none} .poze-tile img,.poze-tile .tico{width:26px;height:26px} .poze-tile b{font:800 10px/1.25 'Lato',sans-serif;text-align:center;color:var(--pz-ink)} .poze-tile.on b{color:#fff} @media (prefers-reduced-motion: reduce){.poze-tile:hover{transform:none}} /* ---------- pola formularzy: kształt przez wypełnienie (v4) ---------- */ .pz-field, .poze-mapbar select, .poze-mapbar input[type=text], .poze-mapbar input[type=number]{ background:var(--pz-bg-soft);border:1px solid transparent;border-radius:var(--pz-r-ctrl); box-shadow:inset 0 1px 3px rgba(1,22,39,.06);padding:9px 12px;font:400 13.5px 'Lato',sans-serif;color:var(--pz-ink); transition:background .2s,box-shadow .2s,border-color .2s} .pz-field:focus{background:#fff;border-color:var(--pz-green);box-shadow:0 0 0 3px rgba(0,181,176,.16);outline:none} .pz-label{display:block;font:800 10.5px 'Lato',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--pz-mut);margin-bottom:6px} /* ---------- cichy akordeon „O danych" (24b) ---------- */ .pz-legal{max-width:1180px;margin:18px auto 0;border-top:1px solid #e9f0ee;background:rgba(255,255,255,.5); border-radius:0;padding:10px 2px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px -12px rgba(1,22,39,.15)} .pz-legal summary{font:700 12px 'Lato',sans-serif;color:#8aa39f;letter-spacing:.02em;cursor:pointer;list-style-position:inside} .pz-legal summary:hover{color:var(--pz-mut)} .pz-legal[open] summary{color:var(--pz-mut);margin-bottom:8px} .pz-legal p,.pz-legal li,.pz-legal div,.pz-legal span{font:400 11px/1.7 'Lato',sans-serif;color:#8aa39f;text-align:justify} .pz-legal b{color:#7d8f8c;font-weight:700} .pz-legal>*:not(summary){margin-left:40px;margin-right:40px} .pz-legal ol{padding-left:16px} .pz-legal li{margin-bottom:6px} .pz-legal .pz-srchead{font:800 10px 'Lato',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#a9bcb9;text-align:left} /* zastrzeżenia luzem (ograniczenia itp.) — wcięte i wyjustowane (24b) */ .pz-disc{max-width:1060px;margin:16px auto 10px;padding:0 40px;text-align:justify; font:400 11px/1.7 'Lato',sans-serif;color:#8aa39f} /* ---------- cennik: jedna subskrypcja premium (decyzja 21:51/21:59) ---------- */ .pz-price{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:12px 0;padding:22px 26px;color:#fff; background:linear-gradient(160deg,#0b2233,var(--pz-navy));border-radius:var(--pz-r-card); box-shadow:0 3px 8px rgba(1,22,39,.24),0 22px 44px -18px rgba(1,22,39,.44)} .pz-price .plan{font:800 10.5px 'Lato',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#9fb3b0} .pz-price .amount{font:900 40px 'Lato',sans-serif;font-variant-numeric:tabular-nums;margin-top:4px} .pz-price .amount small{font-size:15px;font-weight:800;color:#33c4c0} .pz-price .desc{flex:1;min-width:280px;font:400 12.5px/1.7 'Lato',sans-serif;color:#c9d8d6} .pz-price .desc b{color:#fff} /* ============================================================ LIFTING STRON NARZĘDZI (Faza 4) — istniejące selektory stron, ładowane PO styl.css, więc wygrywają bez !important ============================================================ */ /* zakładki moce jako kwadraciki */ .ru-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:1180px;margin:14px auto 8px} @media(max-width:900px){.ru-tabs{grid-template-columns:repeat(2,1fr)}} .ru-tab{display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:center; background:linear-gradient(180deg,#fdfffe,#f4faf9);border:0;border-radius:var(--pz-r-card); padding:12px 8px 10px;min-height:64px;cursor:pointer;color:var(--pz-ink); font:800 11.5px 'Lato',sans-serif;line-height:1.25;text-align:center; box-shadow:0 1px 2px rgba(1,22,39,.05),0 8px 18px -10px rgba(1,22,39,.20); transition:transform .2s,box-shadow .2s} .ru-tab:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(1,22,39,.06),0 14px 28px -12px rgba(0,181,176,.32)} .ru-tab.on{background:linear-gradient(160deg,#0b2233,var(--pz-navy));color:#fff; box-shadow:0 3px 8px rgba(1,22,39,.24),0 16px 34px -14px rgba(1,22,39,.44)} .ru-tab .ru-badge{background:rgba(0,181,176,.14);color:var(--pz-green-d);border-radius:var(--pz-r-pill);padding:2px 9px; font:800 10.5px 'Lato',sans-serif} .ru-tab.on .ru-badge{background:rgba(255,255,255,.16);color:#8fe6e2} @media (prefers-reduced-motion: reduce){.ru-tab:hover{transform:none}} /* kwadraciki ograniczen (markup uzywa .oz-tile w .poze-mapbar) */ .poze-mapbar .oz-tiles{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin:0} @media(max-width:1100px){.poze-mapbar .oz-tiles{grid-template-columns:repeat(5,1fr)}} @media(max-width:640px){.poze-mapbar .oz-tiles{grid-template-columns:repeat(3,1fr)}} .poze-mapbar .oz-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px; background:linear-gradient(180deg,#fdfffe,#f4faf9);border:0;border-radius:var(--pz-r-card); padding:10px 6px 8px;min-height:86px;cursor:pointer;margin:0; box-shadow:0 1px 2px rgba(1,22,39,.05),0 6px 14px -8px rgba(1,22,39,.18); transition:transform .2s,box-shadow .2s} .poze-mapbar .oz-tile:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(1,22,39,.06),0 12px 26px -10px rgba(0,181,176,.35)} .poze-mapbar .oz-tile.on{background:linear-gradient(160deg,#0b2233,var(--pz-navy))} .poze-mapbar .oz-tile.on b{color:#fff} .poze-mapbar .oz-tile .oz-tico{width:26px;height:26px} .poze-mapbar .oz-tile b{font:800 10px/1.25 'Lato',sans-serif;text-align:center;color:var(--pz-ink)} .poze-mapbar .oz-tile .d{display:none} /* filtry mapy ograniczen: etykiety nad polami, rowna linia */ .oz-mapflt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:10px 14px;align-items:end;background:rgba(255,255,255,.82); backdrop-filter:blur(8px) saturate(1.15);-webkit-backdrop-filter:blur(8px) saturate(1.15); border:1px solid rgba(226,234,232,.9);border-radius:var(--pz-r-card);padding:14px 16px;box-shadow:var(--pz-elev-bar)} @media(max-width:860px){.oz-mapflt{grid-template-columns:1fr 1fr}} .oz-mapflt label{display:flex;flex-direction:column;gap:6px;justify-content:flex-end; font:800 10.5px 'Lato',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--pz-mut)} .oz-mapflt label b{display:inline;font-size:10.5px;color:var(--pz-green-d);margin-left:4px;text-transform:none} .oz-mapflt select{background:var(--pz-bg-soft);border:1px solid transparent;border-radius:var(--pz-r-ctrl); box-shadow:inset 0 1px 3px rgba(1,22,39,.06);padding:9px 12px;font:600 13px 'Lato',sans-serif;color:var(--pz-ink);min-width:0} .oz-mapflt select:focus{background:#fff;border-color:var(--pz-green);box-shadow:0 0 0 3px rgba(0,181,176,.16);outline:none} .oz-mapflt input[type=range]{accent-color:var(--pz-green);height:38px;margin:0} /* glebia i ksztalty na natywnych elementach stron narzedzi */ .ru-bar,.rad-panel,.kpi-chips{background:rgba(255,255,255,.82);backdrop-filter:blur(8px) saturate(1.15); -webkit-backdrop-filter:blur(8px) saturate(1.15);border:1px solid rgba(226,234,232,.9); border-radius:var(--pz-r-card);box-shadow:var(--pz-elev-bar)} .ru-kpi .k,.ru-tablewrap,.oz-kpis .oz-k{border:0;border-radius:var(--pz-r-card); background:linear-gradient(180deg,#ffffff,#fbfdfd);box-shadow:var(--pz-elev-card)} .ru-kpi .k:hover,.oz-kpis .oz-k:hover{transform:translateY(-2px);transition:transform .2s} @media (prefers-reduced-motion: reduce){.ru-kpi .k:hover,.oz-kpis .oz-k:hover{transform:none}} .ru-bar input,.ru-bar select{background:var(--pz-bg-soft);border:1px solid transparent;border-radius:var(--pz-r-ctrl); box-shadow:inset 0 1px 3px rgba(1,22,39,.06)} .ru-bar input:focus,.ru-bar select:focus{background:#fff;border-color:var(--pz-green); box-shadow:0 0 0 3px rgba(0,181,176,.16);outline:none} #map,#ozmap{border-radius:10px;overflow:hidden;box-shadow:var(--pz-elev-map)} /* KPI krajowe ograniczen nad mapa */ .oz-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1180px;margin:14px auto;padding:0 24px} @media(max-width:860px){.oz-kpis{grid-template-columns:1fr}} .oz-kpis .oz-k{display:flex;flex-direction:column;padding:14px 18px;margin:0} .oz-kpis .kl{font:800 10.5px 'Lato',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--pz-mut);margin-bottom:6px} .oz-kpis .kv{font:900 30px 'Lato',sans-serif;color:var(--pz-navy);font-variant-numeric:tabular-nums;line-height:1.1} /* podbicie specyficznosci: inline