/* ===================================================================== Complete - complete.com.pl · arkusz styli serwisu (v3, wrzesień 2026) Jeden plik dla wszystkich stron. Fonty self-hosted (assets/fonts/). Paleta: navy #16243B · amber #E8842B · papier #FAF7F2 Kontrast: tekst drobny w amber = #A85A14 (4,7:1 na papierze), CTA = navy na amber (5,7:1). Nie używać białego tekstu na amber. ===================================================================== */ /* fonts.css wpinany osobnym w - @import serializuje pobrania. */ :root{ --navy:#16243B; --navy-2:#1F3252; --navy-3:#0F1A2C; --amber:#E8842B; --amber-dk:#C96E1C; --amber-text:#A25713; --paper:#FAF7F2; --paper-2:#F1EBE0; --paper-3:#E9E0D1; --white:#FFFFFF; --ink:#1A1A1A; --ink-soft:#54514B; --ink-mute:#6D6A63; --line:#DED7CB; --line-2:#C9C0B1; --on-navy:#E3E8EF; --on-navy-soft:#B9C3D3; --ok:#2E7D52; --no:#9B2226; /* Typografia: Fira Sans (Erik Spiekermann, Ralph du Carrois, Carrois Type Design, 2013, licencja SIL OFL). Rodzina zaprojektowana na zlecenie Mozilli do interfejsu Firefox OS: brief brzmial "ma byc czytelna na tanim ekranie, w malym stopniu, w kilkudziesieciu jezykach". To samo zadanie ma cennik cla i akcyzy. Jedna nadrodzina, dwie szerokosci - bez osobnego kroju do naglowkow, bez maszynowego monospace. Cyrylica w tym samym pliku, wiec wersje ru i uk wygladaja jak ta sama firma. Gruzinski i ormianski: Noto Sans, przez :lang(). */ --display:'Fira Sans Condensed','Fira Sans','Noto Sans Georgian','Noto Sans Armenian',system-ui,Arial,sans-serif; --sans:'Fira Sans','Noto Sans Georgian','Noto Sans Armenian',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --wrap:1160px; --gutter:22px; --radius:0; } @media (min-width:900px){ :root{ --gutter:32px; } } /* ---------- reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ overflow-x:clip; } /* ostatnia linia obrony przed poziomym scrollem na wąskich ekranach */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } } body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,picture,video{ display:block; max-width:100%; height:auto; } a{ color:var(--amber-text); text-decoration:none; overflow-wrap:break-word; } a[href^="tel:"]{ white-space:nowrap; } /* numer telefonu nigdy nie lamie sie w polowie */ a:hover{ text-decoration:underline; text-underline-offset:3px; } strong,b{ font-weight:700; } ul,ol{ padding-left:1.2em; } button,input,select,textarea{ font:inherit; color:inherit; } :focus-visible{ outline:3px solid var(--amber); outline-offset:3px; } ::selection{ background:var(--amber); color:var(--navy); } h1,h2,h3,.display{ font-family:var(--display); font-weight:700; line-height:1.07; letter-spacing:-.012em; text-wrap:balance; font-variant-numeric:lining-nums; overflow-wrap:break-word; } /* długie słowa ormiańskie i gruzińskie potrafią nie zmieścić się w 320 px */ /* Fira Sans Condensed ma pelna cyrylice, wiec ru i uk zostaja przy tym samym kroju. */ :lang(ka) h1,:lang(ka) h2,:lang(ka) h3{ font-family:'Noto Sans Georgian',system-ui,Arial,sans-serif; font-weight:600; letter-spacing:0; } :lang(hy) h1,:lang(hy) h2,:lang(hy) h3{ font-family:'Noto Sans Armenian',system-ui,Arial,sans-serif; font-weight:600; letter-spacing:0; } :lang(ka) body,:lang(ka){ font-family:'Noto Sans Georgian','Fira Sans',system-ui,Arial,sans-serif; } :lang(hy) body,:lang(hy){ font-family:'Noto Sans Armenian','Fira Sans',system-ui,Arial,sans-serif; } h1{ font-size:clamp(36px,5.4vw,66px); } h2{ font-size:clamp(29px,3.6vw,46px); } h3{ font-size:clamp(21px,2.2vw,27px); } h4{ font-family:var(--sans); font-size:17px; font-weight:700; } h1 em,h2 em{ font-style:normal; color:var(--amber); } .on-navy h1 em,.on-navy h2 em{ color:var(--amber); } p{ text-wrap:pretty; } p+p{ margin-top:14px; } /* ---------- utilities ---------- */ .wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } .muted{ color:var(--ink-soft); } .small{ font-size:14.5px; } .kicker{ font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--amber-text); display:block; margin-bottom:14px; } /* Numerowane sekcje: etykieta przestaje być ozdobnym „eyebrow", a staje się spisem treści dokumentu. Numeruje tylko etykiety sekcji, nie karty w środku. */ body{ counter-reset:sekcja; } .sec{ counter-increment:sekcja; } .sec .kicker:not(.path .kicker)::before{ content:counter(sekcja,decimal-leading-zero) " / "; color:var(--ink-mute); } .sec.on-navy .kicker::before{ color:var(--on-navy-soft); } .on-navy .kicker{ color:var(--amber); } .lead{ font-size:19px; line-height:1.55; color:var(--ink-soft); max-width:58ch; } .on-navy .lead{ color:var(--on-navy); } .measure{ max-width:66ch; } .vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .mt-1{ margin-top:14px; } .mt-2{ margin-top:26px; } .mt-3{ margin-top:40px; } .mt-4{ margin-top:64px; } .on-navy{ background:var(--navy); color:var(--white); } .on-navy p{ color:var(--on-navy); } .on-navy h2,.on-navy h3{ color:var(--white); } .on-navy a{ color:var(--white); } .paper-2{ background:var(--paper-2); } .white{ background:var(--white); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:13px 26px; border:1px solid var(--amber); background:var(--amber); color:var(--navy); font-weight:700; font-size:15.5px; line-height:1.2; cursor:pointer; text-decoration:none; transition:background .15s,border-color .15s,color .15s; } .btn:hover{ background:var(--amber-dk); border-color:var(--amber-dk); color:var(--navy); text-decoration:none; } .btn.navy{ background:var(--navy); border-color:var(--navy); color:var(--white); } .btn.navy:hover{ background:var(--navy-2); border-color:var(--navy-2); color:var(--white); } .btn.ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:var(--white); } .btn.ghost:hover{ background:rgba(255,255,255,.1); border-color:var(--white); color:var(--white); } .btn.outline{ background:transparent; border-color:var(--navy); color:var(--navy); } .btn.outline:hover{ background:var(--navy); color:var(--white); } .btn.sm{ min-height:44px; padding:9px 18px; font-size:14px; } .btn.block{ display:flex; width:100%; } .btn-row{ display:flex; flex-wrap:wrap; gap:12px; } .textlink{ font-weight:700; color:var(--navy); border-bottom:2px solid var(--amber); padding-bottom:1px; } .textlink:hover{ text-decoration:none; color:var(--amber-text); } .on-navy .textlink{ color:var(--white); } /* ---------- skip link ---------- */ .skip{ position:absolute; left:-9999px; top:8px; z-index:1000; background:var(--amber); color:var(--navy); padding:10px 16px; font-weight:700; } .skip:focus{ left:8px; } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:90; background:rgba(250,247,242,.96); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line); } .site-header .bar{ display:flex; align-items:center; gap:24px; height:72px; } .site-header .logo{ display:block; height:42px; width:auto; flex:none; } .site-header .logo img{ height:42px; width:auto; } .site-header nav.main{ display:none; align-items:center; gap:22px; margin-left:auto; } .site-header nav.main a{ display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; color:var(--navy); font-weight:500; font-size:15px; padding:4px 0; border-bottom:2px solid transparent; } .site-header nav.main a:hover{ text-decoration:none; border-bottom-color:var(--line-2); } .site-header nav.main a[aria-current="page"]{ border-bottom-color:var(--amber); } .site-header .tel{ display:none; font-size:14.5px; font-variant-numeric:tabular-nums; color:var(--navy); white-space:nowrap; } .site-header .cta{ display:none; } /* mobile menu (bez JS) */ .mnav{ margin-left:auto; position:relative; } .mnav summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14px; color:var(--navy); border:1px solid var(--line-2); padding:9px 14px; min-height:44px; } .mnav summary::-webkit-details-marker{ display:none; } .mnav summary b{ font-weight:700; } /* Poniżej 400 px zostaje sam hamburger - długie słowo „Menu" (np. orm. Ընտրացանկ) nie mieści się obok logo i rozpychało stronę w poziomie. */ @media (max-width:399px){ .mnav summary b{ display:none; } .mnav summary{ padding:9px 12px; } .site-header .logo,.site-header .logo img{ height:36px; } } .mnav summary .ico{ width:18px; height:12px; position:relative; } .mnav summary .ico::before,.mnav summary .ico::after,.mnav summary .ico i{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--navy); } .mnav summary .ico::before{ top:0; } .mnav summary .ico i{ top:5px; } .mnav summary .ico::after{ bottom:0; } .mnav .menu{ position:absolute; right:0; top:52px; min-width:260px; background:var(--paper); border:1px solid var(--line); box-shadow:0 20px 40px -20px rgba(22,36,59,.35); padding:8px 0; z-index:100; } .mnav .menu a{ display:block; padding:12px 18px; color:var(--navy); font-weight:500; border-top:1px solid var(--line); } .mnav .menu a:first-child{ border-top:0; } .mnav .menu a:hover{ background:var(--paper-2); text-decoration:none; } .mnav .menu a.accent{ color:var(--amber-text); font-weight:700; } .mnav .menu .tel{ display:block; padding:12px 18px; font-size:15px; font-variant-numeric:tabular-nums; color:var(--navy); border-top:1px solid var(--line); } @media (min-width:900px){ .site-header nav.main{ display:flex; } .site-header .cta{ display:inline-flex; } .mnav{ display:none; } } /* Numer telefonu w pasku dopiero wtedy, gdy nawigacja mieści się w jednej linii. */ @media (min-width:1240px){ .site-header .tel{ display:inline-block; } } @media (min-width:900px) and (max-width:1099px){ .site-header .bar{ gap:14px; } .site-header nav.main{ gap:14px; } .site-header nav.main a{ font-size:14.5px; } } @media (min-width:900px) and (max-width:999px){ .site-header .cta{ display:none; } } /* Dzieci gridów: bez tego element z własnym min-width (np. szeroka tabela) rozpycha całą stronę i tworzy poziomy scroll na telefonie. */ .two > *, .paths > *, .split > *, .contact > *, .article-grid > *, .person > *, .calc .body > *, .hero .inner > *, .strip .row > *, .site-footer .cols > *, .posts li > *, .scope li > *, .ledger li > *, .dist > *, .who > *, form .g2 > *{ min-width:0; } .prose > *{ overflow-wrap:break-word; } /* ---------- pasek języków (tylko Hub) ---------- */ .langbar{ background:var(--navy-3); color:var(--on-navy-soft); border-bottom:1px solid rgba(255,255,255,.12); font-size:13px; } .langbar .wrap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding-top:11px; padding-bottom:11px; } .langbar .t{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8E98AB; } .langbar .items{ display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; } .langbar a,.langbar .on,.langbar .soon{ display:inline-block; padding:5px 10px; line-height:1.2; border:1px solid transparent; } .langbar a b,.langbar .on b{ font-size:11px; font-weight:700; letter-spacing:.07em; margin-right:7px; opacity:.72; } .langbar .on b{ opacity:.62; } .langbar a{ color:var(--white); border-color:rgba(255,255,255,.28); } .langbar a:hover{ background:rgba(255,255,255,.1); text-decoration:none; } .langbar a.alt{ opacity:.7; } /* prowadzi do strony glownej tej wersji, nie do tlumaczenia tej strony */ .langbar a.alt:hover{ opacity:1; } .langbar .on{ background:var(--amber); color:var(--navy); font-weight:700; border-color:var(--amber); } .langbar .soon{ color:#8E98AB; border-color:rgba(255,255,255,.14); border-style:dashed; cursor:help; } @media (max-width:899px){ } /* ---------- sections ---------- */ .sec{ padding:80px 0; } .sec.tight{ padding:56px 0; } .sec.flush{ padding-top:0; } .two{ display:grid; grid-template-columns:1fr; gap:36px; align-items:start; } .two > .lft h2{ max-width:18ch; } .two.narrow > .lft{ } @media (min-width:900px){ .two{ grid-template-columns:1fr 1fr; gap:64px; } .two.narrow{ grid-template-columns:.8fr 1.2fr; } .two.wide-left{ grid-template-columns:1.2fr .8fr; } .sticky{ position:sticky; top:96px; } } .sec-head{ max-width:760px; margin-bottom:34px; } .sec-head h2{ max-width:22ch; } .sec-head .lead{ margin-top:14px; } /* ---------- hero (navy + zdjęcie) ---------- */ .hero{ position:relative; background:var(--navy); color:var(--white); overflow:hidden; isolation:isolate; } .hero .photo{ position:absolute; inset:0; z-index:-2; } .hero .photo img{ width:100%; height:100%; object-fit:cover; object-position:60% center; opacity:.62; } .hero .shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(22,36,59,.96) 0%, rgba(22,36,59,.82) 42%, rgba(22,36,59,.35) 75%, rgba(22,36,59,.25) 100%); } .hero .inner{ position:relative; padding:56px var(--gutter) 60px; display:grid; grid-template-columns:1fr; gap:36px; } .hero .crumbs{ font-size:12.5px; color:var(--on-navy-soft); margin-bottom:26px; } .hero .crumbs a{ color:var(--on-navy-soft); } .hero .kicker{ color:var(--amber); } .hero h1{ max-width:17ch; margin:0 0 20px; } .hero .lead{ color:var(--on-navy); margin-bottom:28px; } .hero .note{ font-size:14px; color:var(--on-navy-soft); margin-top:16px; max-width:52ch; } @media (min-width:900px){ .hero .inner{ grid-template-columns:1.25fr .85fr; gap:56px; padding:96px var(--gutter) 88px; align-items:end; } .hero .photo img{ opacity:.72; } } @media (max-width:899px){ .hero .shade{ background:linear-gradient(180deg, rgba(22,36,59,.95) 0%, rgba(22,36,59,.85) 60%, rgba(22,36,59,.7) 100%); } .hero .photo img{ object-position:62% 20%; opacity:.5; } } .hero.short .inner{ padding-top:44px; padding-bottom:48px; } @media (min-width:900px){ .hero.short .inner{ padding-top:72px; padding-bottom:64px; grid-template-columns:1fr; } .hero.short h1{ max-width:20ch; } } /* karta faktów (w hero i poza nim) */ .facts{ background:var(--paper); color:var(--ink); border-top:4px solid var(--amber); padding:24px 26px 26px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); } .facts .t{ font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; } .facts dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:15px; } .facts dt{ font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--ink-soft); padding-top:3px; white-space:nowrap; } .facts dd{ font-weight:500; } .facts dd a{ color:var(--navy); font-weight:700; } .facts .foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-soft); } /* pasek liczb */ .strip{ background:var(--paper-2); border-bottom:1px solid var(--line); } .strip .row{ display:grid; grid-template-columns:1fr 1fr; } .strip .n{ padding:22px 18px 22px 0; border-top:1px solid var(--line); } .strip .n:nth-child(-n+2){ border-top:0; } .strip .n b{ display:block; font-family:var(--display); font-size:38px; font-weight:600; color:var(--navy); line-height:1; font-variant-numeric:lining-nums; } .strip .n b small{ font-size:22px; font-weight:500; color:var(--amber-dk); } .strip .n > span{ display:block; font-size:14px; color:var(--ink-soft); margin-top:6px; max-width:24ch; } @media (min-width:900px){ .strip .row{ grid-template-columns:repeat(4,1fr); } .strip .n{ border-top:0; border-left:1px solid var(--line); padding:26px 22px; } .strip .n:first-child{ border-left:0; padding-left:0; } } /* ---------- dwie drogi (persony) ---------- */ .paths{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); } .path{ background:var(--white); padding:30px 26px 32px; display:flex; flex-direction:column; } .path.navy{ background:var(--navy); color:var(--white); } .path .kicker{ margin-bottom:10px; } .path h3{ font-size:clamp(26px,2.6vw,32px); margin-bottom:10px; max-width:22ch; } .path p{ color:var(--ink-soft); max-width:46ch; } .path.navy p{ color:var(--on-navy); } .path .audience{ font-size:13px; color:var(--ink-mute); margin-top:14px; line-height:1.5; text-wrap:pretty; hyphens:none; } .path.navy .audience{ color:var(--on-navy-soft); } .path ul.terms{ list-style:none; padding:0; margin:20px 0 26px; } .path ul.terms li{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--line); font-size:15.5px; } .path.navy ul.terms li{ border-top-color:rgba(255,255,255,.16); } .path ul.terms li .k{ font-size:12px; font-weight:600; color:var(--amber-text); padding-top:4px; min-width:32px; } .path.navy ul.terms li .k{ color:var(--amber); } .path .go{ margin-top:auto; } .path figure{ margin:-30px -26px 22px; aspect-ratio:16/8; overflow:hidden; } .path figure img{ width:100%; height:100%; object-fit:cover; } @media (min-width:900px){ .paths{ grid-template-columns:1fr 1fr; } .path{ padding:36px 36px 38px; } .path figure{ margin:-36px -36px 26px; } } /* ---------- ledger (kroki z czasem) ---------- */ .ledger{ list-style:none; padding:0; border-top:1px solid var(--line); counter-reset:step; } .ledger li{ display:grid; grid-template-columns:44px 1fr; gap:14px 16px; padding:22px 0; border-bottom:1px solid var(--line); } .ledger .no{ font-family:var(--display); font-size:34px; font-weight:600; color:var(--amber-dk); line-height:1; font-variant-numeric:lining-nums; } .ledger h3{ font-family:var(--sans); font-size:17px; font-weight:700; margin-bottom:5px; } .ledger p{ font-size:15.5px; color:var(--ink-soft); max-width:60ch; } .ledger .when{ grid-column:2; font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--ink-soft); } .on-navy .ledger{ border-top-color:rgba(255,255,255,.16); } .on-navy .ledger li{ border-bottom-color:rgba(255,255,255,.16); } .on-navy .ledger .no{ color:var(--amber); } .on-navy .ledger p,.on-navy .ledger .when{ color:var(--on-navy); } @media (min-width:640px){ .ledger li{ grid-template-columns:64px 1fr 150px; } .ledger .when{ grid-column:auto; text-align:right; padding-top:4px; } } /* ---------- lista definicji (zakres) ---------- */ .scope{ list-style:none; padding:0; border-top:1px solid var(--line); } .scope li{ display:grid; grid-template-columns:1fr; gap:6px 24px; padding:18px 0; border-bottom:1px solid var(--line); } .scope li b{ font-size:17px; } .scope li span{ color:var(--ink-soft); font-size:15.5px; } @media (min-width:640px){ .scope li{ grid-template-columns:230px 1fr; } } .on-navy .scope,.on-navy .scope li{ border-color:rgba(255,255,255,.16); } .on-navy .scope li span{ color:var(--on-navy); } /* ---------- split (dla kogo / nie dla kogo) ---------- */ .split{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); } .split > div{ background:var(--white); padding:26px 26px 28px; } .split h3{ font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:12px; } .split .yes h3{ color:var(--ok); } .split .no h3{ color:var(--no); } .split ul{ padding-left:18px; font-size:15.5px; } .split li{ margin:7px 0; } @media (min-width:760px){ .split{ grid-template-columns:1fr 1fr; } } /* ---------- tabela danych ---------- */ table.data{ width:100%; border-collapse:collapse; background:var(--white); font-size:14.5px; } table.data th,table.data td{ padding:12px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; text-wrap:pretty; hyphens:none; } table.data th{ font-size:11px; letter-spacing:.09em; text-wrap:balance; text-transform:uppercase; color:var(--ink-soft); font-weight:600; background:var(--paper-2); } table.data td.v{ font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap; text-align:right; } /* Dłuższe stawki (np. „1,40-12,00 PLN, wycena per projekt") muszą się zawijać, inaczej wychodzą poza komórkę. Krótkie liczby dalej trzymają się w jednej linii. */ table.data td.v{ white-space:normal; overflow-wrap:break-word; } table.data td.v .fact{ white-space:nowrap; } table.data tr:last-child td{ border-bottom:0; } .tablewrap{ overflow-x:auto; border:1px solid var(--line); } .tablewrap table.data{ min-width:520px; } .tnote{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; } /* ---------- distances ---------- */ .dist{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); } .dist div{ background:var(--navy); padding:16px 18px; } .dist b{ font-family:var(--display); font-size:30px; font-weight:600; color:var(--white); display:block; line-height:1; font-variant-numeric:lining-nums; } .dist span{ font-size:13.5px; color:var(--on-navy-soft); } @media (min-width:640px){ .dist{ grid-template-columns:repeat(3,1fr); } } /* ---------- osoba ---------- */ .person{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; } .person img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .person .role{ font-size:12.5px; font-weight:600; color:var(--amber); letter-spacing:.1em; text-transform:uppercase; } .person h2,.person h3{ font-size:clamp(30px,3.2vw,40px); margin:6px 0 14px; } .person p{ max-width:50ch; } .person .links{ margin-top:18px; display:flex; gap:18px; flex-wrap:wrap; font-size:14.5px; } .person .links a{ border-bottom:1px solid var(--amber); } @media (min-width:900px){ .person{ grid-template-columns:1fr 1fr; gap:56px; } } /* ---------- FAQ ---------- */ .faq details{ border-bottom:1px solid var(--line); padding:16px 0; } .faq details:first-of-type{ border-top:1px solid var(--line); } .faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:18px; font-family:var(--display); font-size:21px; font-weight:600; color:var(--navy); line-height:1.25; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; color:var(--amber-dk); font-size:22px; line-height:1; flex:none; } .faq details[open] summary::after{ content:"-"; } .faq details p{ margin-top:10px; font-size:16px; color:var(--ink-soft); max-width:68ch; } .faq details p+p{ margin-top:8px; } .on-navy .faq details{ border-color:rgba(255,255,255,.16); } .on-navy .faq summary{ color:var(--white); } .on-navy .faq details p{ color:var(--on-navy); } /* ---------- kontakt / formularz ---------- */ .contact{ display:grid; grid-template-columns:1fr; gap:36px; } @media (min-width:900px){ .contact{ grid-template-columns:.9fr 1.1fr; gap:64px; } } .who{ background:var(--white); border:1px solid var(--line); padding:20px 22px; display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center; } .who img{ width:96px; height:96px; object-fit:cover; object-position:50% 20%; } .who .n{ font-family:var(--display); font-size:26px; font-weight:600; color:var(--navy); line-height:1.1; } .who p{ overflow-wrap:anywhere; } .who p{ font-size:14.5px; margin:3px 0 0; color:var(--ink-soft); } .who a{ color:var(--navy); font-weight:700; } .who .big{ font-size:17px; font-variant-numeric:tabular-nums; margin-top:8px; } .on-navy .who{ background:var(--navy-2); border-color:rgba(255,255,255,.16); } .on-navy .who .n,.on-navy .who a{ color:var(--white); } .on-navy .who p{ color:var(--on-navy); } .legal{ font-size:12.5px; color:var(--ink-soft); margin-top:22px; line-height:1.7; } .on-navy .legal{ color:var(--on-navy-soft); } form.lead-form{ background:var(--white); border:1px solid var(--line); padding:26px 24px 28px; } .on-navy form.lead-form{ background:var(--white); color:var(--ink); } form .f{ margin-bottom:14px; } form label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; } form label .opt{ font-weight:400; color:var(--ink-mute); } form input:not([type=checkbox]):not([type=radio]),form select,form textarea{ width:100%; min-height:48px; padding:11px 14px; border:1px solid var(--line-2); background:var(--white); font-size:15.5px; border-radius:0; -webkit-appearance:none; appearance:none; } form select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316243B' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; } form textarea{ min-height:110px; resize:vertical; } form input:focus,form select:focus,form textarea:focus{ border-color:var(--navy); outline:3px solid rgba(232,132,43,.35); outline-offset:0; } form .g2{ display:grid; grid-template-columns:1fr; gap:0 14px; } @media (min-width:640px){ form .g2{ grid-template-columns:1fr 1fr; } } form .consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; font-weight:400; color:var(--ink-soft); margin:4px 0 18px; line-height:1.5; } form .consent input{ width:18px; height:18px; margin-top:3px; flex:none; accent-color:var(--navy); } form .after{ font-size:13.5px; color:var(--ink-soft); margin-top:12px; } .hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } form .err{ display:none; background:#FBE9E7; color:var(--no); border:1px solid #F0B9B4; padding:10px 14px; font-size:14px; margin-bottom:14px; } form.invalid .err{ display:block; } /* ---------- kalkulator ---------- */ .calc{ border:1px solid var(--line); background:var(--white); } .calc .in{ padding:26px 24px 8px; } .calc .in h3{ font-size:24px; font-weight:600; margin-bottom:6px; } .calc .in p.db{ color:var(--ink-soft); font-size:15px; max-width:60ch; } .calc .body{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:18px; } .calc .controls label{ display:block; font-size:13.5px; font-weight:700; margin:18px 0 8px; } .calc .controls label:first-child{ margin-top:0; } .calc .controls label .val{ color:var(--amber-text); font-weight:600; font-variant-numeric:tabular-nums; } .calc input[type=range]{ width:100%; accent-color:var(--amber); height:32px; } .calc input[type=number],.calc input[type=text],.calc select{ width:100%; max-width:100%; padding:11px 14px; border:1px solid var(--line-2); font-size:15px; font-variant-numeric:tabular-nums; background:var(--paper); min-height:48px; } .calc select{ font-variant-numeric:normal; appearance:none; -webkit-appearance:none; padding-right:36px; text-overflow:ellipsis; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316243B' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .calc .controls > div{ margin:0; } .calc .out{ background:var(--navy); color:var(--white); padding:26px 24px; } .calc .out .lbl{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--on-navy-soft); } .calc .out .big{ font-family:var(--display); font-size:clamp(40px,4vw,54px); font-weight:600; line-height:1.05; color:var(--amber); margin:8px 0 16px; font-variant-numeric:lining-nums; } .calc .out .row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.14); } .calc .out .row span:last-child{ font-variant-numeric:tabular-nums; font-weight:500; text-align:right; color:var(--on-navy); } .calc .foot{ font-size:12.5px; color:var(--ink-soft); padding:10px 24px 18px; } @media (min-width:900px){ .calc .body{ grid-template-columns:1fr 1fr; } } /* ---------- Hub teaser / mapa ---------- */ .map{ border:1px solid rgba(255,255,255,.14); background:var(--navy-3); } .map img{ width:100%; height:auto; } /* ---------- artykuł / prose ---------- */ .prose{ max-width:70ch; font-size:17.5px; line-height:1.68; } .prose > *+*{ margin-top:18px; } .prose h2{ font-size:clamp(28px,3vw,36px); margin-top:44px; } .prose h3{ font-size:clamp(22px,2.2vw,26px); margin-top:32px; } .prose p.answer{ font-size:19px; color:var(--ink); border-left:4px solid var(--amber); padding-left:18px; } .prose ul,.prose ol{ padding-left:1.3em; } .prose li{ margin:6px 0; } .prose li::marker{ color:var(--amber-dk); } .prose table{ font-size:15px; } .prose .box{ background:var(--paper-2); border:1px solid var(--line); padding:20px 22px; } .prose .box .t{ font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; } .prose figure{ margin:28px 0; } .prose figcaption{ font-size:12.5px; color:var(--ink-soft); margin-top:8px; } .prose .src{ font-size:14px; color:var(--ink-soft); } .article-head{ padding:44px 0 34px; border-bottom:1px solid var(--line); } .article-head h1{ font-size:clamp(34px,4.4vw,54px); max-width:20ch; } .article-head .meta{ font-size:12.5px; color:var(--ink-soft); margin-top:16px; display:flex; flex-wrap:wrap; gap:8px 20px; } .crumbs{ font-size:12.5px; color:var(--ink-soft); margin-bottom:18px; } .crumbs ol{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; } .crumbs li+li::before{ content:"›"; margin-right:6px; color:var(--ink-mute); } .crumbs a{ color:var(--ink-soft); } .aside-cta{ background:var(--navy); color:var(--white); padding:26px 24px; } .aside-cta h3{ font-size:24px; margin-bottom:8px; } .aside-cta p{ color:var(--on-navy); font-size:15px; } .aside-cta .btn{ margin-top:16px; } .article-grid{ display:grid; grid-template-columns:1fr; gap:40px; padding:40px 0 80px; } @media (min-width:1000px){ .article-grid{ grid-template-columns:minmax(0,1fr) 320px; gap:72px; } .article-grid aside{ position:sticky; top:96px; } } .related{ list-style:none; padding:0; } .related li{ border-top:1px solid var(--line); padding:12px 0; } .related li:last-child{ border-bottom:1px solid var(--line); } .related a{ color:var(--navy); font-weight:500; } .related .k{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); } .disclaimer{ font-size:13.5px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:16px; margin-top:40px; } /* lista artykułów (Wiedza) */ .posts{ list-style:none; padding:0; border-top:1px solid var(--line); } .posts li{ display:grid; grid-template-columns:1fr; gap:6px 32px; padding:24px 0; border-bottom:1px solid var(--line); } .posts .k{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-text); } .posts h3{ font-size:clamp(22px,2.4vw,28px); } .posts h3 a{ color:var(--navy); } .posts p{ color:var(--ink-soft); font-size:15.5px; max-width:60ch; } .posts .more{ font-size:13px; } @media (min-width:760px){ .posts li{ grid-template-columns:150px 1fr; } .posts .k{ padding-top:8px; } } /* ---------- notice / placeholder faktów ---------- */ .notice{ background:var(--paper-2); border-left:4px solid var(--amber); padding:16px 20px; font-size:15px; } .fact{ outline:2px dashed var(--amber); outline-offset:2px; background:rgba(232,132,43,.10); cursor:help; } /* Po uzupełnieniu faktów Marcin usuwa klasę .fact w HTML; ten styl zostaje nieużyty. */ /* ---------- stopka ---------- */ .site-footer{ background:var(--navy-3); color:var(--on-navy-soft); padding:56px 0 28px; font-size:14.5px; } .site-footer .cols{ display:grid; grid-template-columns:1fr; gap:30px; } .site-footer .flogo img{ height:40px; width:auto; margin-bottom:14px; } .site-footer p.ab{ max-width:40ch; color:var(--on-navy-soft); } .site-footer h2{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:#8E98AB; margin-bottom:12px; font-weight:600; } .site-footer ul{ list-style:none; padding:0; } .site-footer li{ padding:4px 0; overflow-wrap:anywhere; } .site-footer a{ color:var(--on-navy); } .site-footer a:hover{ color:var(--white); } .site-footer .legal-line{ border-top:1px solid rgba(255,255,255,.14); margin-top:34px; padding-top:18px; font-size:12px; color:#8E98AB; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } @media (min-width:760px){ .site-footer .cols{ grid-template-columns:1.6fr 1fr 1fr 1fr; } } /* ---------- cookies ---------- */ /* Pasek, nie modal. Jedna linia na desktopie, dwie na telefonie. Pokazywany przez JS dopiero wtedy, gdy skonfigurowany jest kontener GTM (patrz assets/js/site.js). */ .cookiebar[hidden]{ display:none !important; } /* baner ukryty dopóki JS go nie pokaże - display:flex poniżej wygrywa z [hidden] */ .cookiebar{ position:fixed; left:12px; right:12px; bottom:12px; z-index:200; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; background:var(--navy); color:var(--on-navy); border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 30px -14px rgba(0,0,0,.5); padding:12px 16px; font-size:14px; line-height:1.45; } .cookiebar p{ margin:0; max-width:72ch; } .cookiebar b{ color:var(--white); } .cookiebar a{ color:var(--white); border-bottom:1px solid var(--amber); } .cookiebar .btns{ display:flex; gap:8px; flex:none; } .cookiebar .btn{ min-height:40px; padding:8px 18px; font-size:14px; } .cookiebar .btn.outline{ border-color:rgba(255,255,255,.5); color:var(--white); } .cookiebar .btn.outline:hover{ background:rgba(255,255,255,.12); color:var(--white); } @media (min-width:900px){ .cookiebar{ left:auto; right:24px; bottom:24px; max-width:min(760px,calc(100vw - 48px)); } } @media (max-width:560px){ .cookiebar .btns{ width:100%; } .cookiebar .btn{ flex:1 1 0; } } /* ---------- 404 / dziękujemy ---------- */ .simple{ padding:80px 0 100px; } .simple h1{ font-size:clamp(34px,4.4vw,56px); max-width:20ch; } .simple .lead{ margin-top:16px; } /* ---------- print ---------- */ @media print{ .site-header,.site-footer,.cookiebar,.mnav,.btn{ display:none !important; } body{ background:#fff; } }