/* Psychologia Internetu — wspolny arkusz stylow Wartosci przeniesione z makiet Claude Design (04_produkt/claude design/). Rozmiary tekstu w rem, zeby dzialaly przyciski A/A/A i zoom przegladarki. 1rem = 16px przy rozmiarze domyslnym. */ :root{ --paper:#F7F4EF; --card:#FFFFFF; --ink:#221D1B; --ink-soft:#5C534E; --ink-faint:#8B817A; --ink-meta:#6B615A; --mauve:#6B5250; --mauve-deep:#493635; --slate:#6B839A; --slate-deep:#42566B; --cream:#EFE0C8; --line:#DFD7CA; --line-soft:#EBE5DB; --focus:#B8862E; --cien:0 1px 2px rgba(34,29,27,.05), 0 8px 24px -16px rgba(34,29,27,.25); --serif:Faustina,Georgia,'Times New Roman',serif; --sans:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace; --miara:1180px; } /* trzy stopnie rozmiaru tekstu — sterowane atrybutem na */ html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%} html[data-rozmiar="b"]{font-size:112.5%} html[data-rozmiar="c"]{font-size:125%} *{box-sizing:border-box} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto} a{color:var(--mauve)} a:hover{color:var(--mauve-deep)} input,textarea,button,select{font:inherit} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ——— pomocnicze ——— */ .pojemnik{max-width:var(--miara);margin:0 auto;padding:0 clamp(18px,3vw,24px)} .tylko-dla-czytnikow{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--ink);color:var(--paper);padding:12px 18px;text-decoration:none; } .skip:focus{left:0} .nadtytul{ font-family:var(--mono);font-size:.688rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mauve);margin:0 0 14px;line-height:1.5; } .meta{ font-family:var(--mono);font-size:.656rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-meta);margin:0; } .uwaga-techniczna{ font-family:var(--mono);font-size:.656rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-meta);margin:0; } /* ——— naglowek ——— */ .naglowek{ position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line); } .naglowek-wnetrze{ max-width:var(--miara);margin:0 auto;padding:12px clamp(18px,3vw,24px); display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between; } .marka{text-decoration:none;color:var(--ink);display:grid;gap:2px;align-content:center;min-height:44px} .marka-nazwa{font-family:var(--serif);font-size:1.188rem;font-weight:600;line-height:1.1} .marka-podpis{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-meta)} .nawigacja{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;font-size:.906rem} .nawigacja a{color:var(--ink-soft);text-decoration:none;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center} .nawigacja a:hover{color:var(--ink)} .nawigacja a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ink)} .nawigacja .link-faq{ font-family:var(--mono);font-size:.688rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-meta);border-bottom:1px dotted var(--line); } .rozmiar-tekstu{ display:flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--line); font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-size:.625rem;color:var(--ink-meta); } .rozmiar-tekstu button{ min-width:44px;min-height:44px;border:0;background:transparent;cursor:pointer; font-family:var(--mono);color:var(--ink-meta);border-bottom:2px solid transparent; } .rozmiar-tekstu button:nth-of-type(1){font-size:.75rem} .rozmiar-tekstu button:nth-of-type(2){font-size:.938rem} .rozmiar-tekstu button:nth-of-type(3){font-size:1.125rem} .rozmiar-tekstu button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:500} /* ——— przyciski i linki akcji ——— */ .przycisk{ display:inline-flex;align-items:center;justify-content:center;text-align:center; font-size:.938rem;font-weight:500;line-height:1.3;padding:14px 26px;min-height:48px; border:1px solid var(--ink);background:var(--ink);color:var(--paper); text-decoration:none;cursor:pointer; } .przycisk:hover{opacity:.85;color:var(--paper)} .przycisk--duzy{font-size:1rem;padding:16px 30px;min-height:52px} .przycisk--obrys{background:transparent;color:var(--ink)} .przycisk--obrys:hover{color:var(--ink)} .przycisk--cichy{ border-color:var(--line);background:transparent;color:var(--ink); font-size:.906rem;padding:12px 20px;min-height:44px; } .przycisk--cichy:hover{color:var(--ink)} .przycisk--warsztat{ font-size:.875rem;padding:11px 18px;min-height:44px; border-color:var(--slate);background:transparent;color:var(--slate-deep); } .przycisk--warsztat[aria-pressed="true"]{background:var(--slate-deep);border-color:var(--slate-deep);color:var(--paper)} .przycisk--modul[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .przycisk--modul{background:transparent;color:var(--ink);font-size:.906rem;padding:12px 20px;min-height:44px} .link-mono{ font-family:var(--mono);font-size:.719rem;letter-spacing:.12em;text-transform:uppercase; min-height:44px;display:inline-flex;align-items:center; } /* ——— uklad sekcji strony glownej ——— */ .tresc{max-width:var(--miara);margin:0 auto;padding:0 clamp(18px,3vw,24px)} .sekcja{padding:clamp(34px,4.5vw,72px) 0;border-top:1px solid var(--line)} .sekcja--bez-kreski{border-top:0} .sekcja-uklad{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,72px)} .sekcja-numer{ flex:0 0 auto;width:clamp(60px,8vw,120px); font-family:var(--mono);font-size:.719rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-meta); } .sekcja-korpus{flex:1 1 520px;min-width:0} .sekcja-korpus--waska{max-width:70ch} h2.tytul-sekcji{ font-family:var(--serif);font-size:clamp(1.625rem,3.6vw,2.375rem);font-weight:600; line-height:1.15;margin:0 0 24px; } .tytul-sekcji em{font-style:italic;color:var(--mauve)} .akapit{font-size:1.031rem;color:var(--ink-soft);margin:0 0 18px} .akapit:last-child{margin-bottom:0} .akapit--mocny{color:var(--ink);font-size:clamp(1.031rem,1.7vw,1.188rem)} /* ——— hero ——— */ .hero{ display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);align-items:flex-start; padding:clamp(32px,5vw,68px) 0 clamp(30px,4vw,52px); } .hero-glowna{flex:1 1 520px;min-width:0} .hero .nadtytul{font-size:clamp(.625rem,1.1vw,.719rem);letter-spacing:.16em;margin-bottom:22px} .hero h1{ font-family:var(--serif);font-weight:600;font-size:clamp(2.125rem,5.4vw,3.75rem); line-height:1.08;letter-spacing:-.02em;margin:0; } .hero h1 em{font-style:italic;color:var(--mauve)} .haslo{ font-family:var(--serif);font-size:clamp(1.313rem,2.7vw,1.875rem);line-height:1.32; color:var(--ink);margin:24px 0 0;max-width:26ch; } .dowod{ font-family:var(--mono);font-size:clamp(.688rem,1.15vw,.781rem);letter-spacing:.06em; color:var(--ink-soft);line-height:1.7;margin:22px 0 0;padding-top:18px; border-top:1px solid var(--line);max-width:64ch; } .hero-akcja{margin-top:clamp(24px,3vw,34px)} .hero-akcja p{font-size:.906rem;color:var(--ink-meta);margin:14px 0 0;max-width:52ch} .karta-audytu{ flex:0 1 372px;min-width:0;background:var(--card);border:1px solid var(--line); padding:clamp(20px,2.4vw,26px); } .karta-audytu h2{ font-family:var(--serif);font-size:clamp(1.188rem,2vw,1.375rem);font-weight:600; line-height:1.25;margin:0; } .karta-audytu h2 em{font-style:italic;color:var(--mauve)} .karta-audytu .opis{display:flex;gap:16px;align-items:flex-end;margin:18px 0} .karta-audytu .opis p{font-size:.906rem;color:var(--ink-soft);margin:0;flex:1} .karta-audytu .mikro{font-size:.813rem;color:var(--ink-meta);margin:14px 0 0;line-height:1.5} /* macierz podgladowa (cztery cwiartki) */ .macierz-mini{position:relative;width:136px;height:136px;border:1px solid var(--line);background:#FAF7F2} .macierz-mini .cw{position:absolute;width:50%;height:50%;display:flex;padding:4px} .macierz-mini .cw span{ font-family:var(--mono);font-size:.594rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft); } .macierz-mini .cw-tl{top:0;left:0;background:rgba(239,224,200,.35);align-items:flex-start} .macierz-mini .cw-tr{top:0;right:0;background:rgba(107,82,80,.10);align-items:flex-start;justify-content:flex-end} .macierz-mini .cw-tr span{color:var(--mauve-deep)} .macierz-mini .cw-bl{bottom:0;left:0;align-items:flex-end} .macierz-mini .cw-br{bottom:0;right:0;background:rgba(107,131,154,.13);align-items:flex-end;justify-content:flex-end} .macierz-mini .cw-br span{color:var(--slate-deep)} .macierz-mini .os-v{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)} .macierz-mini .os-h{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)} .macierz-podpis{ font-family:var(--mono);font-size:.594rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-soft);margin:6px 0 0;text-align:center; } /* ——— dwa przechyly ——— */ .przechyly{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .przechyl{background:var(--paper);padding:clamp(22px,2.6vw,34px) clamp(0px,2.6vw,34px)} .przechyl .etykieta{ font-family:var(--mono);font-size:.688rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px; } .przechyl--a .etykieta{color:var(--mauve)} .przechyl--b .etykieta{color:var(--slate-deep)} .przechyl p:last-child{font-size:1.031rem;color:var(--ink-soft);margin:0} .posrodku{ font-family:var(--serif);font-size:clamp(1.188rem,2.2vw,1.5rem);line-height:1.4;text-align:center; max-width:34ch;margin:clamp(24px,3vw,36px) auto 0; } /* ——— pas z drugim wejsciem do audytu ——— */ .pas-audytu{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(18px,2vw,24px) 0} .pas-audytu .wiersz{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline} .pas-audytu p{font-size:.969rem;color:var(--ink-soft);margin:0;flex:1 1 380px} /* ——— karty i kafle ——— */ .karta{background:var(--card);border:1px solid var(--line);padding:clamp(22px,2.6vw,34px)} .karta--miara{max-width:66ch} .karta p:first-child{font-size:1.031rem;color:var(--ink);margin:0 0 16px} .karta p:last-child{font-size:.969rem;color:var(--ink-soft);margin:0} .arytmetyka{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:12px} .arytmetyka .blok{ flex:1 1 96px;height:96px;border:1px solid var(--line);background:var(--card);padding:10px; display:flex;flex-direction:column;justify-content:space-between; } .arytmetyka .blok span{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft)} .arytmetyka .blok .godziny{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-meta)} .arytmetyka .blok--warsztat{height:48px;border-color:var(--slate);background:rgba(107,131,154,.08);padding:8px 10px;justify-content:flex-end} .arytmetyka .blok--warsztat .godziny{color:var(--slate-deep)} .arytmetyka-podpis{ font-family:var(--mono);font-size:.656rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-meta);margin:0 0 26px; } .proza{max-width:70ch;display:grid;gap:18px} .proza p{font-size:1.031rem;color:var(--ink-soft);margin:0} .proza p strong{font-weight:600;color:var(--ink)} /* ——— prowadzacy ——— */ .prowadzacy{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .osoba{background:var(--card);padding:clamp(22px,2.6vw,32px);display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start} .osoba img{flex:0 0 auto;width:132px;height:132px;object-fit:cover;object-position:center top;border:1px solid var(--line)} .osoba-tresc{flex:1 1 220px;min-width:0} .osoba h3{font-family:var(--serif);font-size:1.438rem;font-weight:600;line-height:1.2;margin:0 0 6px} .osoba .rola{font-family:var(--mono);font-size:.656rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px} .osoba--bogna .rola{color:var(--mauve)} .osoba--dawid .rola{color:var(--slate-deep)} .osoba .biogram{font-size:.938rem;color:var(--ink-soft);margin:0} /* ——— liczby (gdzie prowadzilismy) ——— */ .liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .liczba{background:var(--paper);padding:20px 22px} .liczba .wartosc{font-family:var(--serif);font-size:1.875rem;line-height:1;margin:0 0 8px} .liczba .opis{font-family:var(--mono);font-size:.656rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-meta);margin:0} /* ——— FAQ ——— */ .faq-lista{border-top:1px solid var(--line);max-width:80ch} .faq-pozycja{border-bottom:1px solid var(--line)} .faq-pytanie{ width:100%;text-align:left;display:flex;gap:16px;align-items:baseline;justify-content:space-between; background:transparent;border:0;cursor:pointer;padding:18px 0;min-height:52px;color:var(--ink); } .faq-pytanie .tekst{font-family:var(--serif);font-size:clamp(1.063rem,1.8vw,1.219rem);font-weight:600;line-height:1.3} .faq-pytanie .znak{font-family:var(--mono);font-size:.813rem;color:var(--ink-meta);flex:0 0 auto} .faq-odpowiedz{font-size:1rem;color:var(--ink-soft);margin:0 0 20px;max-width:70ch} /* ——— stopka ——— */ .stopka{border-top:1px solid var(--line);background:var(--paper);margin-top:clamp(24px,3vw,48px)} .stopka-wnetrze{ max-width:var(--miara);margin:0 auto;padding:clamp(28px,3.5vw,48px) clamp(18px,3vw,24px); display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start; } .stopka-marka{flex:1 1 280px} .stopka-marka p:first-child{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin:0 0 8px} .stopka-marka p:last-child{font-size:.906rem;color:var(--ink-soft);margin:0} .stopka-linki{ flex:0 1 auto;display:flex;flex-wrap:wrap;gap:8px 28px; font-family:var(--mono);font-size:.688rem;letter-spacing:.12em;text-transform:uppercase; } .stopka-linki a,.stopka-linki button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center} .stopka-linki button{ background:transparent;border:0;padding:0;cursor:pointer;color:var(--mauve); font-family:var(--mono);font-size:.688rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline; } /* ——— OFERTA: plan bazowy ——— */ .oferta-glowna{max-width:var(--miara);margin:0 auto;padding:clamp(28px,4vw,64px) clamp(18px,3vw,24px) clamp(40px,5vw,96px)} .oferta-wstep{max-width:70ch;margin-bottom:clamp(32px,4vw,56px)} .oferta-wstep .nadtytul{font-size:.719rem;letter-spacing:.16em;margin-bottom:18px;display:flex;align-items:center;gap:12px} .oferta-wstep .nadtytul .kreska{flex:1;height:1px;background:var(--line);max-width:120px} .oferta-wstep h1{ font-family:var(--serif);font-weight:600;font-size:clamp(2rem,6vw,3.25rem); line-height:1.12;letter-spacing:-.015em;margin:0; } .oferta-wstep h1 em{font-style:italic;color:var(--mauve)} .oferta-wstep p{font-size:clamp(1rem,1.6vw,1.156rem);color:var(--ink-soft);margin:20px 0 0} .oferta-wstep p + p{margin-top:14px} .plan-bazowy{ background:var(--card);border:1px solid var(--line);box-shadow:var(--cien); padding:clamp(24px,3vw,44px);margin-bottom:clamp(40px,5vw,72px); } .plan-bazowy h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.625rem,3.6vw,2.25rem);line-height:1.15;margin:0} .plan-bazowy .lead{font-size:clamp(.969rem,1.5vw,1.094rem);color:var(--ink-soft);max-width:68ch;margin:16px 0 0} .plan-kolumny{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.5vw,44px); margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.5vw,32px);border-top:1px solid var(--line-soft); } .plan-kolumny h3{ font-family:var(--mono);font-size:.688rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-meta);margin:0 0 14px; } .lista-kreski{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:.938rem;color:var(--ink-soft);line-height:1.55} .lista-kreski li{padding-left:18px;position:relative} .lista-kreski li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:1px;background:var(--ink-faint)} .lista-kreski strong{font-weight:600;color:var(--ink)} .plan-podstawa{font-size:.906rem;color:var(--ink-meta);margin:clamp(18px,2vw,26px) 0 0;max-width:68ch} .plan-dni{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line); border:1px solid var(--line);margin-top:clamp(24px,3vw,36px); } .plan-dzien{background:var(--card);padding:clamp(18px,2vw,26px)} .plan-dzien .kto{font-family:var(--mono);font-size:.656rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 8px} .plan-dzien--a .kto{color:var(--mauve)} .plan-dzien--b .kto{color:var(--slate-deep)} .plan-dzien h4{font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1.2;margin:0 0 14px} .plan-dzien .lista-kreski{font-size:.906rem;gap:10px;line-height:1.5} .plan-akcje{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:clamp(22px,2.5vw,32px)} .plan-akcje a{font-size:.938rem;min-height:44px;display:flex;align-items:center} /* ——— OFERTA: kafle modulow ——— */ .grupa-naglowek{ display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(20px,2.5vw,30px); font-family:var(--mono);font-size:.719rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve); } .grupa-naglowek .kreska{flex:1;height:1px;background:var(--mauve);opacity:.35} .grupa-naglowek--warsztaty{color:var(--slate-deep);margin-bottom:18px} .grupa-naglowek--warsztaty .kreska{background:var(--slate);opacity:.4} .kafle{display:grid;gap:14px;margin:0 0 clamp(36px,4vw,64px)} .kafel{background:var(--card);border:1px solid var(--line);padding:clamp(18px,2.2vw,28px)} .kafel[data-wybrany="tak"]{border-color:var(--ink)} .kafel-gora{display:flex;gap:clamp(14px,1.6vw,20px);align-items:flex-start} .kafel-numer{ flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);display:grid;place-items:center; font-family:var(--mono);font-size:.813rem;color:var(--ink-soft); } .kafel-tresc{flex:1;min-width:0} .kafel h3{font-family:var(--serif);font-size:clamp(1.188rem,2.2vw,1.438rem);font-weight:600;line-height:1.22;margin:0} .kafel-kto{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px} .kafel-kto img{width:26px;height:26px;object-fit:cover;object-position:top center;border:1px solid var(--line)} .kafel-kto span{font-family:var(--mono);font-size:.688rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-meta)} .kafel-etykieta{font-size:.969rem;color:var(--ink-soft);margin:14px 0 0;max-width:62ch} .znacznik-wybrany{ flex:0 0 auto;font-family:var(--mono);font-size:.656rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink);border:1px solid var(--ink);padding:5px 9px; } .kafel-opis{ margin-top:clamp(16px,2vw,22px);padding-top:clamp(16px,2vw,22px); border-top:1px solid var(--line-soft);padding-left:clamp(0px,7vw,56px); } .kafel-opis .naglowek-listy{ font-family:var(--mono);font-size:.656rem;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-meta);margin:0 0 12px; } .kafel-opis .lista-kreski{font-size:.938rem;gap:9px;line-height:1.5;max-width:74ch} .kafel-adnotacja{ font-size:.875rem;color:var(--ink-soft);background:rgba(239,224,200,.45);border:1px solid var(--line); padding:14px 16px;margin:18px 0 0;max-width:74ch; } .kafel-akcje{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:clamp(16px,2vw,22px);padding-left:clamp(0px,7vw,56px)} .przelacz-opis{ font-size:.906rem;padding:12px 0;min-height:44px;border:0;background:transparent;color:var(--mauve); cursor:pointer;border-bottom:1px solid var(--line); } /* ——— OFERTA: blok AI ——— */ .blok-ai{ border:1px solid var(--slate);background:rgba(107,131,154,.07); padding:clamp(20px,2.6vw,34px);margin-bottom:clamp(36px,4vw,64px); } .blok-ai .nadtytul{color:var(--slate-deep);margin-bottom:12px} .blok-ai h2{font-family:var(--serif);font-size:clamp(1.438rem,3vw,1.875rem);font-weight:600;line-height:1.18;margin:0} .blok-ai > p{font-size:.969rem;color:var(--ink-soft);margin:14px 0 0;max-width:78ch} .blok-ai-pary{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,2vw,28px); align-items:stretch;margin-top:clamp(20px,2.4vw,28px); } .blok-ai-para{background:var(--card);border:1px solid var(--line);padding:18px 20px} .blok-ai-para .etykieta{font-family:var(--mono);font-size:.656rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px} .blok-ai-para--profilaktyka .etykieta{color:var(--slate-deep)} .blok-ai-para--praktyka .etykieta{color:var(--mauve)} .blok-ai-para h3{font-family:var(--serif);font-size:1.156rem;font-weight:600;line-height:1.25;margin:0 0 8px} .blok-ai-para p:last-child{font-size:.875rem;color:var(--ink-meta);margin:0} /* ——— OFERTA: warsztaty ——— */ .warsztaty-wstep{max-width:62ch;margin-bottom:22px} .warsztaty-wstep h2{font-family:var(--serif);font-size:clamp(1.313rem,2.6vw,1.625rem);font-weight:600;line-height:1.2;margin:0} .warsztaty-wstep p{font-size:.969rem;color:var(--ink-soft);margin:10px 0 0} .warsztaty-lista{border-top:1px solid var(--line);margin-bottom:clamp(36px,4vw,64px)} .warsztat{ border-bottom:1px solid var(--line);padding:clamp(18px,2vw,24px) 0; display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,32px);align-items:start; } .warsztat-znacznik{ display:inline-block;font-family:var(--mono);font-size:.688rem;letter-spacing:.13em;text-transform:uppercase; color:var(--slate-deep);border:1px solid var(--slate);padding:4px 8px;margin-bottom:12px; } .warsztat h3{font-family:var(--serif);font-size:clamp(1.125rem,2vw,1.313rem);font-weight:600;line-height:1.25;margin:0} .warsztat .kto{font-family:var(--mono);font-size:.656rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-meta);margin:10px 0 0} .warsztat-akcje{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:16px} .warsztat .lista-kreski{font-size:.906rem;gap:8px;line-height:1.5} .warsztat .podstawa{font-size:.844rem;color:var(--ink-meta);margin:14px 0 0} /* ——— OFERTA: licznik i formularz ——— */ .licznik{ border:1px solid var(--ink);background:var(--card); padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px); display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;justify-content:space-between; } .licznik p{font-family:var(--mono);margin:0} .licznik .stan{font-size:clamp(.75rem,1.3vw,.844rem);letter-spacing:.08em;color:var(--ink)} .licznik .godziny{font-size:.688rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-meta)} .komunikat-modulow{ border:1px solid var(--mauve);border-top:0;background:rgba(107,82,80,.08);color:var(--mauve-deep); font-size:.906rem;margin:0;padding:14px 18px; } .ramka-formularza{border:1px solid var(--line);border-top:0;background:var(--card);padding:clamp(22px,3vw,44px)} .ramka-formularza h2{font-family:var(--serif);font-size:clamp(1.438rem,3vw,1.875rem);font-weight:600;line-height:1.18;margin:0} .ramka-formularza .lead{font-size:.969rem;color:var(--ink-soft);margin:10px 0 0;max-width:60ch} .pola{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(20px,2.5vw,32px)} .pole{display:grid;gap:7px} .pole > span:first-child{font-family:var(--mono);font-size:.656rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)} .pole input,.pole textarea{ width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--line); background:var(--card);color:var(--ink);font-size:.969rem; } .pole textarea{min-height:88px;resize:vertical} .pole .podpowiedz{font-size:.813rem;color:var(--ink-meta)} .pole .blad{font-size:.844rem;color:var(--mauve-deep)} .pole input[aria-invalid="true"],.pole textarea[aria-invalid="true"]{border-color:var(--mauve);border-width:2px} .pole-uwagi{display:grid;gap:7px;margin-top:clamp(16px,2vw,24px)} .pole-zgoda{display:flex;gap:12px;align-items:flex-start;margin-top:clamp(18px,2vw,26px);min-height:44px;cursor:pointer} .pole-zgoda input{width:24px;height:24px;margin-top:1px;flex:0 0 auto;accent-color:var(--ink)} .pole-zgoda span{font-size:.938rem;color:var(--ink-soft);max-width:70ch} .blad-zgody{font-size:.844rem;color:var(--mauve-deep);margin:8px 0 0;padding-left:32px} .wysylka{ display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center; margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line-soft); } .wysylka span{font-size:.875rem;color:var(--ink-meta)} .komunikat-bledu{ border:1px solid var(--mauve);background:rgba(107,82,80,.08);color:var(--mauve-deep); font-size:.938rem;margin:20px 0 0;padding:16px 18px;max-width:74ch; } .potwierdzenie{border:1px solid var(--line);border-top:0;background:var(--card);padding:clamp(28px,4vw,56px)} .potwierdzenie h2{font-family:var(--serif);font-size:clamp(1.625rem,4vw,2.375rem);font-weight:600;line-height:1.15;margin:0} .potwierdzenie p{font-size:1.031rem;color:var(--ink-soft);max-width:64ch;margin:18px 0 0} .potwierdzenie .przycisk{margin-top:26px} /* pasek stanu na waskich ekranach */ .pasek-stanu{ position:sticky;bottom:var(--wysokosc-banera,0px);z-index:20;background:var(--card);border-top:1px solid var(--ink); box-shadow:0 -6px 24px -18px rgba(34,29,27,.5);padding:12px 16px; display:flex;gap:12px;align-items:center;justify-content:space-between; } .pasek-stanu p{font-family:var(--mono);margin:0} .pasek-stanu .l1{font-size:.688rem;letter-spacing:.06em;color:var(--ink)} .pasek-stanu .l2{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-meta);margin-top:3px} .pasek-stanu .przycisk{flex:0 0 auto;font-size:.844rem;padding:11px 14px;min-height:44px} @media (min-width:900px){.pasek-stanu{display:none}} /* ——— dokument (polityka prywatnosci) ——— */ .dokument-uklad{ max-width:1000px;margin:0 auto;padding:clamp(32px,5vw,72px) clamp(18px,3vw,48px) clamp(48px,6vw,96px); display:flex;gap:clamp(28px,5vw,64px);align-items:flex-start;flex-wrap:wrap; } .dokument-spis{flex:0 0 220px;position:sticky;top:88px} .dokument-spis p{font-family:var(--mono);font-size:.656rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-meta);margin:0 0 14px} .dokument-spis ol{margin:0;padding:8px 0 0;list-style:none;display:grid;gap:0;font-size:.844rem;border-top:1px solid var(--line)} .dokument-spis a{text-decoration:none;color:var(--ink-soft);display:flex;align-items:center;min-height:44px} .dokument-spis a:hover{color:var(--ink)} .dokument{flex:1 1 420px;max-width:68ch;color:var(--ink)} .dokument h1{font-family:var(--serif);font-size:clamp(2rem,5vw,2.75rem);font-weight:600;line-height:1.1;margin:0} .dokument .data{font-family:var(--mono);font-size:.688rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-meta);margin:16px 0 0} .dokument .kreska{border-top:1px solid var(--line);margin:32px 0} .dokument h2{font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.2;margin:36px 0 14px;scroll-margin-top:96px} .dokument h3{font-family:var(--serif);font-size:1.125rem;font-weight:600;line-height:1.3;margin:24px 0 10px} .dokument p{font-size:1rem;color:var(--ink-soft);margin:0 0 14px} .dokument p.wiodacy{color:var(--ink);font-size:1.063rem} .dokument ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:10px;font-size:1rem;color:var(--ink-soft)} .dokument ul li{padding-left:18px;position:relative} .dokument ul li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1px;background:var(--ink-faint)} .dokument strong{font-weight:600;color:var(--ink)} @media (max-width:820px){.dokument-spis{position:static;flex:1 1 100%}} /* ——— baner zgod ——— */ .baner-zgody{ position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card); border-top:1px solid var(--ink);box-shadow:0 -6px 24px -18px rgba(34,29,27,.5); max-height:90vh;overflow-y:auto; } .baner-zgody[hidden]{display:none!important} .baner-wnetrze{ max-width:var(--miara);margin:0 auto;padding:22px clamp(18px,3vw,28px); display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between; } .baner-wnetrze > p{font-size:.906rem;color:var(--ink-soft);margin:0;flex:1 1 420px;max-width:76ch} .baner-akcje{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center} .baner-akcje .przycisk{font-size:.906rem;padding:12px 22px;min-height:44px} .baner-link{ background:transparent;border:0;padding:0 4px;cursor:pointer;color:var(--mauve); font-size:.906rem;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline; } .baner-panel{max-width:var(--miara);margin:0 auto;padding:0 clamp(18px,3vw,28px) 28px} .baner-panel h2{font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.2;margin:0 0 20px} .zgoda-lista{border-top:1px solid var(--line)} .zgoda-kategoria{ border-bottom:1px solid var(--line);padding:20px 0; display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-start;justify-content:space-between; } .zgoda-kategoria .opis{flex:1 1 420px} .zgoda-kategoria .etykieta{font-family:var(--mono);font-size:.688rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin:0 0 8px} .zgoda-kategoria .opis p:last-child{font-size:.906rem;color:var(--ink-soft);margin:0;max-width:70ch} .przelacznik{display:flex;gap:12px;align-items:center;min-height:44px} .przelacznik .stan{font-family:var(--mono);font-size:.656rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-meta)} .przelacznik button{ width:52px;height:28px;border:1px solid var(--ink);background:var(--card);cursor:pointer; display:flex;align-items:center;justify-content:flex-start;padding:3px; } .przelacznik button span{width:20px;height:20px;background:var(--ink);display:block} .przelacznik button[aria-checked="true"]{justify-content:flex-end;background:var(--cream);border-color:var(--ink)} .przelacznik button[disabled]{border-color:var(--line);background:var(--line-soft);cursor:default;justify-content:flex-end} .przelacznik button[disabled] span{background:var(--ink-faint)} .baner-panel-akcje{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:24px} .baner-panel-akcje .przycisk{font-size:.906rem;padding:12px 22px;min-height:44px} /* ——— strona 404 ——— */ .pusto{max-width:46rem;margin:0 auto;padding:clamp(48px,8vw,120px) clamp(18px,3vw,24px)} .pusto h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);font-weight:600;line-height:1.12;margin:0 0 20px} .pusto p{font-size:1.031rem;color:var(--ink-soft);margin:0 0 18px} /* ——— audyt w ramie strony ——— */ .rama-audytu{max-width:var(--miara);margin:0 auto;padding:0 clamp(18px,3vw,24px)} .audyt-osadzenie{border:1px solid var(--line);background:var(--card);margin:clamp(20px,3vw,32px) 0 clamp(32px,4vw,64px)} .audyt-ramka{display:block;width:100%;border:0} .audyt-nag{padding:clamp(28px,4vw,56px) 0 0;max-width:70ch} .audyt-nag h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5.4vw,3rem);line-height:1.1;margin:0} .audyt-nag h1 em{font-style:italic;color:var(--mauve)} .audyt-nag p{font-size:clamp(1rem,1.6vw,1.156rem);color:var(--ink-soft);margin:18px 0 0} .audyt-akcje{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin:0 0 clamp(32px,4vw,56px)} .audyt-komunikat{font-size:.906rem;color:var(--ink-meta);margin:0} @media print{ .naglowek,.stopka-linki,.baner-zgody,.pasek-stanu,.rozmiar-tekstu{display:none!important} body{background:#fff} } /* ——— FAQ na elemencie
— dziala takze bez JS ——— */ .faq-pozycja > summary{ list-style:none;cursor:pointer;display:flex;gap:16px;align-items:baseline;justify-content:space-between; padding:18px 0;min-height:52px; } .faq-pozycja > summary::-webkit-details-marker{display:none} .faq-pozycja > summary .tekst{ font-family:var(--serif);font-size:clamp(1.063rem,1.8vw,1.219rem);font-weight:600;line-height:1.3;color:var(--ink); } .faq-pozycja > summary::after{ content:"+";font-family:var(--mono);font-size:.813rem;color:var(--ink-meta);flex:0 0 auto; } .faq-pozycja[open] > summary::after{content:"—"} .faq-pozycja > summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* karty na podstronie Kontakt — odnosnik jest jedyna trescia kafla, wiec musi sam byc celem dotykowym 44 px */ .liczba .wartosc a{display:inline-flex;align-items:center;min-height:44px} /* ——— naglowek na waskim ekranie ——— Na desktopie naglowek to jeden pas ~60 px i moze byc przyklejony. Na 390 px ta sama nawigacja lamie sie na cztery wiersze i zajmuje okolo 215 px — czyli cwierc ekranu na stale. Dlatego ponizej 820 px naglowek przewija sie razem z trescia. */ @media (max-width:820px){ .naglowek{position:static} .naglowek-wnetrze{padding:10px clamp(18px,3vw,24px);gap:6px 20px} .nawigacja{gap:0 16px;width:100%} .rozmiar-tekstu{padding-left:0;border-left:0;border-top:1px solid var(--line);width:100%;margin-top:2px} .karta-audytu{flex:1 1 100%} }