/* ========================================================================== KREDEO — design system 2.0 (na podstawie makiety z 29.07.2026) Jeden arkusz, zero zależności. Warianty tła: bez klasy = PÓŁOKRĘGI, = proste podziały sekcji. ========================================================================== */ :root{ /* --- kolory z makiety (pipetą z pliku AI) --- */ --navy:#233986; /* granat: header, stopka, sekcje, nagłówki */ --navy-2:#3055A1; /* granat jaśniejszy: dekoracyjne kształty */ --navy-30:#B9C4D6; /* tekst drugorzędny na granacie */ --gold:#F0AD00; /* złoty: CTA, akcenty, numery */ --gold-text:#F0AD00; /* JEDEN odcień złota wszędzie (decyzja właściciela; na białym 2,0:1 — tylko duże/pogrubione napisy) */ --teal:#58BAA5; /* turkus: przycisk kalkulatora, ptaszek w logo */ --lblue:#A6C5E8; /* jasny błękit: sekcje, koła dekoracyjne, karta kalkulatora */ --white:#fff; --ink:#233986; /* domyślny kolor tekstu */ --line:rgba(35,57,134,.18); /* --- geometria --- */ --wrap:1440px; --pad:clamp(20px,4.5vw,60px); --sag:clamp(48px,18.5vw,356px); /* strzałka łuku = 18,5% szerokości (zmierzone w makiecie) */ --clr:clamp(56px,5.4vw,104px); /* obowiązkowy oddech między tekstem a wierzchołkiem łuku */ --r:20px; --r-lg:28px; } *{margin:0;padding:0;box-sizing:border-box} /* wystające krawędzie łuków muszą być przycięte na html I body. overflow-x:hidden na body robi z niego kontener przewijania i ŁAMIE position:sticky nagłówka w Firefoksie/Safari - dlatego clip (przycina, ale nie tworzy scrollera); hidden zostaje jako fallback dla starszych */ html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{font-family:"Reddit Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink);background:var(--white);line-height:1.5;font-size:16px;overflow-x:hidden;overflow-x:clip} img,svg{display:block;max-width:100%} a{color:inherit} [id]{scroll-margin-top:120px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} /* ---------- dostępność ---------- */ .skip-link{position:absolute;left:-9999px} .skip-link:focus{position:fixed;top:8px;left:8px;z-index:200;background:#fff;color:var(--navy); padding:12px 20px;border-radius:10px;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.2)} a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px} .btn-gold:focus-visible,.btn-teal:focus-visible{outline-color:var(--navy);box-shadow:0 0 0 3px #fff} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* ========================================================================== KOPUŁY (półokręgi) — sekcja "wyrasta" łukiem w sekcję powyżej ========================================================================== */ .sec{position:relative} /* geometria z makiety: PŁASKI wierzchołek na środkowych ~58% szerokości + krzywizna w narożach. Lekkie wyjście poza viewport (-7vw) trzyma ramiona łuku poza kolumną treści — bez tego pierwsza litera nagłówka wychodziłaby poza łuk przy 992–1440 px. html/body przycinają nadmiar. */ .sec--dome::before{content:"";position:absolute;left:-7vw;right:-7vw;top:calc(-1 * var(--sag) + 1px); height:var(--sag);background:inherit; border-radius:27vw 27vw 0 0 / var(--sag) var(--sag) 0 0} .v-flat .sec--dome::before{display:none} /* treść sekcji startuje tuż pod WIERZCHOŁKIEM łuku, nie pod jego ramionami. display:flow-root jest konieczne — bez niego ujemny margines .wrap kolapsuje i przesuwa całą sekcję (razem z tłem i kopułą) zamiast samej treści. Odstęp zaszyty w samym marginesie (a nie w padding-top), żeby podstrony z inline `padding-top` tylko powiększały prześwit, nigdy go nie zmniejszały. */ .sec--dome{display:flow-root} .sec--dome > .wrap{position:relative;z-index:1; margin-top:calc(clamp(28px,4.6vw,88px) - var(--sag))} /* sekcja zakończona TEKSTEM, nad którą wyrasta kopuła: zapas na łuk + oddech */ .before-dome{padding-bottom:calc(var(--sag) + var(--clr))} /* sekcja zakończona ZDJĘCIEM: postać celowo nachodzi na kopułę (jak w makiecie) */ .before-dome-photo{padding-bottom:6px} .v-flat .before-dome{padding-bottom:calc(var(--sag) + var(--clr))} .bg-navy{background:var(--navy);color:#fff} .bg-white{background:var(--white)} .bg-lblue{background:var(--lblue)} /* ========================================================================== HEADER ========================================================================== */ /* menu plywajace: biala pigulka z cieniem, odklejona od gornej krawedzi */ /* header = bialy prostokat na pelna szerokosc z cieniem (uwaga Agnieszki, koniec pigulki). Mobile: statyczny, bez przycisku (plywa dolny pasek ZLOZ WNIOSEK), hamburger przy prawej krawedzi, pod paskiem przerwa; desktop >=992px: sticky z przyciskiem. relative musi zostac - dropdown .nav pozycjonuje sie po .hdr */ .hdr{background:#fff;box-shadow:0 6px 24px rgba(35,57,134,.12);position:relative;z-index:100;margin-bottom:14px} .hdr-in > .btn-gold{display:none} .hdr-in{display:flex;align-items:center;gap:14px;height:60px} /* logo = oryginalny plik z makiety (granatowe w headerze, biale w stopce) */ .logo{display:inline-block;flex:none;line-height:0;text-decoration:none} .logo img{height:26px;width:auto} .nav-toggle{margin-left:auto;width:44px;height:44px;flex:none;background:none;border:0;cursor:pointer; display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 9px} .nav-toggle i{display:block;height:2.5px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s} .nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .nav{display:none;flex-direction:column;gap:6px;position:absolute;top:calc(100% + 8px);left:0;right:0; background:#fff;padding:14px 18px;border-radius:22px; box-shadow:0 14px 30px rgba(34,57,133,.16)} .nav.is-open{display:flex} .nav a{color:var(--navy);text-decoration:none;font-weight:800;font-size:.98rem;padding:12px 10px;border-radius:10px} .nav a:hover{color:var(--teal)} .nav a[aria-current="page"]{color:var(--teal);font-weight:800} .btn-gold{display:inline-flex;align-items:center;justify-content:center;background:var(--gold); color:var(--navy);font-weight:800;text-decoration:none;border-radius:999px;padding:13px 22px; font-size:.82rem;letter-spacing:.04em;white-space:nowrap;flex:none;transition:filter .15s,transform .1s} .btn-gold:hover{filter:brightness(.93)} .btn-gold:active{transform:translateY(1px)} .btn-gold--lg{width:100%;padding:17px 26px;font-size:.95rem} /* ========================================================================== HERO ========================================================================== */ .hero{position:relative;overflow:hidden;padding:14px 0 calc(var(--sag) * .9)} h1{font-size:clamp(1.72rem,1.1rem + 2.2vw,3rem);line-height:1.14;font-weight:900;letter-spacing:-.8px} h1 .amt{color:var(--gold-text)} .hero-sub{margin-top:14px;font-size:clamp(.95rem,.9rem + .2vw,1.1rem);font-weight:600;max-width:34em} .hero-h1{margin-bottom:clamp(24px,3vw,44px)} /* kompozycja od grafika — ksztalty wbudowane w plik, zero rysowanych spanow */ .hero-art{margin:18px auto 0;max-width:440px} .hero-art img{width:100%;height:auto} /* oprawa kalkulatora — TO jest nasze; środek to iframe widgetu */ .calc-wrap{background:var(--lblue);border-radius:var(--r-lg);padding:16px;margin-top:18px} .calc-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--navy); font-size:.76rem;font-weight:800;border-radius:999px;padding:7px 14px;margin-bottom:12px} .calc-slot{min-height:450px} /* widget raportuje za niska wysokosc i obcina wlasny przycisk CTA -> podloga */ .calc-slot iframe{border:0;display:block;width:100%;min-height:450px} .calc-note{text-align:center;font-size:.8rem;font-weight:600;margin-top:12px;color:var(--navy)} .calc-bik{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px; font-size:.76rem;font-weight:700;color:var(--navy)} .calc-terms{display:block;text-align:center;font-size:.72rem;margin-top:6px;color:var(--navy);text-decoration:underline} /* ========================================================================== USP + PASEK ZAUFANIA (na granacie) ========================================================================== */ /* 4 złote plakietki — pierwszy element granatowego pasa (makieta) */ .badges span{display:block;margin-top:10px;font-weight:800;font-size:.92rem;text-align:center} .badges{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 18px; text-align:center;justify-items:center;list-style:none} .badges li{list-style:none;display:flex;flex-direction:column;align-items:center} /* claim na granacie — wyśrodkowany, z akcentami kolorystycznymi */ .claim{text-align:center;font-weight:800;font-size:clamp(1.05rem,.9rem + .6vw,1.45rem); line-height:1.45;max-width:44em;margin:clamp(44px,5vw,72px) auto 0} .c-gold{color:var(--gold)} .c-teal{color:var(--teal)} .usp{display:grid;gap:18px;padding-top:0;margin-top:44px} .usp li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;font-weight:600;line-height:1.35; list-style:none;color:var(--lblue)} /* ========================================================================== PARTNERZY (widget w iframe) ========================================================================== */ /* karuzela pod „Jak to działa" — odstęp od kroków z góry, zapas na kopułę daje sekcja */ .partners{padding-top:clamp(24px,3.5vw,56px);text-align:center;margin-bottom:0} .partners-t{font-weight:800;font-size:.92rem;margin-bottom:16px} .partners-slot{min-height:120px} .partners-slot iframe{border:0;display:block;width:100%} /* ========================================================================== NAGŁÓWKI SEKCJI ========================================================================== */ .h2{font-size:clamp(1.4rem,.95rem + 1.15vw,2.55rem);font-weight:900;letter-spacing:-.6px;margin-bottom:12px} .rule{height:2px;background:var(--gold);border-radius:2px;margin-bottom:24px} .rule--lblue{background:var(--lblue)} .rule--navy{background:var(--navy)} /* ========================================================================== RODZAJE POŻYCZEK ========================================================================== */ .types{display:grid;gap:22px;grid-auto-rows:1fr} .type{text-decoration:none;color:var(--navy);display:flex;flex-direction:column} .type svg{width:28px;height:28px;margin-bottom:8px;color:var(--lblue)} .type h3{font-size:1rem;font-weight:800;margin-bottom:5px} .type p{font-size:.86rem;line-height:1.45} .type .go{color:inherit;font-weight:800} .type:hover h3{text-decoration:underline} .art-couple{margin:26px auto 0;max-width:420px} /* kompozycja od grafika — kapsuly wbudowane w plik */ .art-couple img{width:100%;height:auto} /* ========================================================================== KROKI — koła na desktopie, karty na mobile ========================================================================== */ .steps{display:grid;gap:18px;margin-top:8px} /* max-width: w ukladzie jednokolumnowym (mobile/tablet) kafel nie moze rosnac do pelnej szerokosci — na ~700px grafika kroku robi sie gigantyczna */ .step{padding:30px 22px 26px;text-align:center;position:relative;margin-top:30px;aspect-ratio:346/387;display:flex;flex-direction:column;justify-content:center;max-width:400px;margin-left:auto;margin-right:auto} .step h3{font-size:1.06rem;font-weight:900;margin-bottom:3px} .step .cap{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px} .step p{font-size:.86rem;line-height:1.45} .step p,.step .cap{text-wrap:balance} /* tla krokow = dostarczone grafiki (ksztalt + pusty medalion w pliku) */ .step-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top center;z-index:0} .step-in{position:relative;z-index:1;padding-top:9%} .step--1{color:#fff} .step--2{color:var(--navy)} .step--3{color:var(--navy)} .art-bags{margin:22px auto 0;max-width:380px} .art-bags img{width:100%;height:auto} /* ========================================================================== TIMELINE „Co się stanie" ========================================================================== */ .tl-lead{font-weight:800;font-size:.94rem;margin-bottom:22px} .tl{display:grid;gap:20px} .tl li{display:flex;gap:14px;list-style:none} .tl-num{flex:none;width:clamp(54px,4.1vw,79px);height:clamp(54px,4.1vw,79px); border-radius:50%;background:var(--gold);color:var(--navy);font-weight:900; font-size:clamp(1.55rem,2.5vw,2.9rem);display:flex;align-items:center;justify-content:center} .tl h3{font-size:1rem;font-weight:800;margin-bottom:4px} .tl p{font-size:.86rem;line-height:1.5} .tl-disc{margin-top:24px;font-size:.78rem;line-height:1.5;opacity:.9} /* ========================================================================== FAQ ========================================================================== */ .faq details{border-bottom:0;padding:14px 0} .faq summary{font-weight:800;font-size:.98rem;cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-weight:800;font-size:1.15rem;line-height:.9;flex:none} .faq details[open] summary::after{content:"–"} .faq details p{font-size:.88rem;line-height:1.72;margin-top:10px;max-width:82ch} .faq a{color:var(--gold-text);text-decoration:underline;text-underline-offset:2px} /* ========================================================================== ASYSTENT ========================================================================== */ .assist{text-align:center;padding-top:8px} .assist-ph{max-width:240px;margin:0 auto 20px} .assist-ph img{width:100%;height:auto} .assist-sub{font-weight:800;font-size:.94rem;margin:16px 0 14px} /* ========================================================================== STOPKA ========================================================================== */ .ft{background:var(--navy);color:#fff;padding:36px 0 30px;font-size:.82rem;line-height:1.6} .ft .logo{margin-bottom:16px} /* poswiadczenie KNF pod logo (widoczne, nie tylko w disclaimerze) */ .ft-knf{margin-top:4px;font-size:.74rem;font-weight:700;line-height:1.55;color:var(--navy-30)} /* linki do dokumentow prawnych na app.kredeo.pl (Omnibus/RODO) */ .ft-docs{margin-top:10px;font-size:.78rem;font-weight:700;line-height:1.9} .ft-docs a{color:#fff;opacity:.85;text-decoration:none} .ft-docs a:hover{opacity:1;text-decoration:underline} .ft .logo img{height:30px} .ft-grid{display:grid;gap:26px} .ft h4{font-size:.9rem;font-weight:800;margin-bottom:10px;padding-bottom:8px;border-bottom:1.5px solid rgba(255,255,255,.32)} .ft a{color:#fff;text-decoration:none;display:block;padding:5px 0;width:fit-content} .ft a:hover{text-decoration:underline} .ft-map{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .ft-social{display:flex;gap:12px;margin-top:12px} .ft-social a{width:26px;height:26px;border-radius:50%;background:#fff;border:0;color:var(--navy); display:flex;align-items:center;justify-content:center;padding:0} .ft-social svg{width:14px;height:14px} .zpf{display:inline-block;border:1.5px solid rgba(255,255,255,.55);border-radius:6px;padding:8px 12px; font-size:.58rem;font-weight:700;letter-spacing:.08em;line-height:1.3;margin-bottom:20px} .legal{margin-top:40px;font-size:.7rem;line-height:1.55;color:rgba(255,255,255,.88)} .legal p+p{margin-top:12px} .copy{text-align:center;font-size:.7rem;margin-top:56px;color:rgba(255,255,255,.88)} /* ========================================================================== STICKY CTA (mobile) ========================================================================== */ .sticky{position:fixed;bottom:0;left:0;right:0;z-index:90;background:#fff;border-top:1px solid var(--line); padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))} body.has-sticky{padding-bottom:80px} /* ========================================================================== DESKTOP ========================================================================== */ @media(min-width:992px){ .hdr{position:sticky;top:0;margin-bottom:0} .hdr-in > .btn-gold{display:inline-flex} .nav-toggle{display:none} .nav{display:flex!important;flex-direction:row;align-items:center;gap:4px;position:static; background:none;padding:0;border-top:0;box-shadow:none;margin-left:auto} .nav a{font-size:.92rem;padding:10px 12px} .hdr-in{height:104px} .logo img{height:40px} /* zapas na kopułę granatu: plakietki startują pod spodem kalkulatora */ /* kopula granatu wysoko w hero: postac i kalkulator nachodza na luk (makieta) */ .hero{padding:34px 0 calc(var(--sag) * .5)} /* KALKULATOR PO PRAWEJ (decyzja właściciela), zdjęcie w lewej kolumnie pod nagłówkiem */ /* prawa kolumna = dokładnie szerokość oprawy kalkulatora, żeby panel ją wypełniał */ .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:44px;align-items:start} .hero-copy{min-width:0} /* dekoracja wychodząca poza lewą krawędź (w makiecie po prawej — tam stoi kalkulator) */ .hero > .wrap{position:relative;z-index:1} /* treść nad dekoracją */ /* overflow:hidden trzyma postać w obrębie własnej kolumny (przy 992 px nachodziła na kalkulator) */ .hero-art{margin:10px 0 -60px;position:relative;z-index:1;max-width:640px} .hero-art img{width:100%;height:auto} /* kompozycja z wbudowanymi ksztaltami — bez dodatkowych dekoracji CSS */ /* justify-self:end bez width zmienia element grida ze stretch na shrink-to-fit */ .calc-wrap{width:100%;max-width:480px;justify-self:end;margin-top:0; position:relative;z-index:2;margin-bottom:-40px} .calc-slot{min-height:450px} .calc-slot iframe{min-height:450px} .badges span{display:block;margin-top:10px;font-weight:800;font-size:.92rem;text-align:center} /* plakietki rozlozone rownomiernie od lewej krawedzi tresci do lewej krawedzi kalkulatora (kalkulator 480px + 24px przerwy) */ /* delikatnie skoncentrowane: wieksza przerwa od kalkulatora (76px zamiast 24px) */ .badges{grid-template-columns:repeat(4,max-content);justify-content:space-between; gap:24px;width:calc(100% - 556px);margin-right:auto} .usp{grid-template-columns:repeat(3,1fr);gap:26px;padding-top:0;margin-top:44px} .types{grid-template-columns:repeat(3,1fr);gap:30px 34px} .types-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;align-items:start} .art-couple{margin:-70px 0 0;max-width:none} .art-couple img{width:100%;height:auto} /* KROKI: trzy różne kształty w jednym rzędzie + fotografia jako czwarta kolumna; poniżej idzie karuzela partnerów, więc bez zapasu na kopułę */ .steps-row{position:relative;z-index:2;margin-bottom:0} .steps{width:74%;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:end;margin-top:56px} .step{aspect-ratio:1;padding:0;display:flex;flex-direction:column;justify-content:center} .step-in{width:76%;margin:0 auto} .art-bags{position:absolute;right:0;bottom:-20px;width:28%;height:auto;margin:0;max-width:none} .art-bags img{width:100%;height:auto} .tl{grid-template-columns:1fr;gap:26px} .tl li>div{max-width:82ch} .faq summary{font-size:1.05rem} .assist-ph{max-width:330px} .assist-grid{display:grid;grid-template-columns:.4fr .6fr;gap:44px;align-items:center;text-align:left} .assist-grid .assist-ph{margin:0} /* szeroka pigułka CTA (makieta ~65% szerokości kontentu) */ .btn-gold--lg{display:block;width:min(65%,940px);text-align:center;padding-block:15px} .assist .btn-gold--lg{width:100%;max-width:100%} .ft{padding:56px 0} .ft .logo img{height:38px} .ft-grid{grid-template-columns:.9fr .7fr 1.4fr;gap:40px} .sticky{display:none} body.has-sticky{padding-bottom:0} } /* ========================================================================== REDUKCJA RUCHU ========================================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ========================================================================== PODSTRONY I BLOG — komponenty dodane przy przebudowie serwisu ========================================================================== */ /* okruszki */ .crumbs{font-size:.8rem;font-weight:600;padding-top:16px;opacity:.9} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .crumbs a{color:var(--gold-text);text-decoration:none} .crumbs a:hover{text-decoration:underline} .crumbs .sep{opacity:.5} /* hero podstrony (bez dużego zdjęcia) */ .hero--page{padding:6px 0 34px} .hero--page h1{max-width:22em} .hero--page .hero-sub{margin-top:16px} .byline{font-size:.8rem;font-weight:600;margin-top:14px;opacity:.85} /* treść merytoryczna (podstrony + artykuły) */ .content{max-width:74ch} .content h2{font-size:clamp(1.2rem,1rem + .8vw,1.55rem);font-weight:900;letter-spacing:-.4px;margin:30px 0 10px} .content h3{font-size:1.06rem;font-weight:800;margin:22px 0 8px} .content p{font-size:.95rem;line-height:1.65;margin-bottom:14px} .content ul,.content ol{margin:0 0 16px 22px;font-size:.95rem;line-height:1.6} .content li{margin-bottom:8px} .content strong{font-weight:800} .content a:not(.btn-gold):not(.btn-teal){color:var(--gold-text);text-decoration:underline;text-underline-offset:2px} .content a:not(.btn-gold):not(.btn-teal):hover{color:var(--navy)} .content>:first-child{margin-top:0} /* Przeczytaj także */ .read-more{background:var(--lblue);border-radius:var(--r);padding:20px 22px;margin-top:30px} .read-more strong{display:block;font-size:.98rem;margin-bottom:10px} .read-more ul{list-style:none;display:grid;gap:8px;margin:0} .read-more a{color:var(--navy);font-weight:700;font-size:.92rem;text-decoration:underline;text-underline-offset:2px} /* Źródła (blog) */ .sources{margin-top:30px;padding-top:20px;border-top:1.5px solid var(--line);font-size:.86rem} .sources h2{font-size:1.02rem;font-weight:800;margin-bottom:10px} .sources ul{margin:0 0 0 20px} .sources li{margin-bottom:7px;line-height:1.5} /* karty artykułów na /blog/ */ .posts{display:grid;gap:18px} .post{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:20px;text-decoration:none;color:var(--navy);transition:transform .15s,box-shadow .15s} .post:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(34,57,133,.12)} .post h3{font-size:1.02rem;font-weight:800;margin-bottom:6px} .post p{font-size:.86rem;line-height:1.5} .post .more{color:var(--gold-text);font-weight:800;font-size:.86rem;display:inline-block;margin-top:8px} /* pasek CTA w treści */ .cta-band{background:var(--lblue);border-radius:var(--r-lg);padding:24px 22px;margin:32px 0;text-align:center} .cta-band p{font-weight:800;font-size:1rem;margin-bottom:14px} @media(min-width:992px){ .hero--page{padding:10px 0 44px} .content p,.content ul,.content ol{font-size:1rem} .posts{grid-template-columns:repeat(3,1fr);gap:24px} .read-more ul{grid-template-columns:repeat(2,1fr);gap:10px 26px} } /* linki w treści na błękitnym tle: złoty daje 2,5:1 — za mało; granat daje 5,9:1 */ .bg-lblue .content a:not(.btn-gold):not(.btn-teal), .read-more a{color:var(--navy)} .bg-lblue .content a:not(.btn-gold):not(.btn-teal):hover{color:#182861} /* ---------- ikony wyciągnięte 1:1 z makiety (zawierają własne tła/medaliony) ---------- */ .ico-img{flex:none;width:46px;height:46px;object-fit:contain} .badges .ico-img{width:52px;height:52px} .type-ico-img{width:44px;height:44px;object-fit:contain;margin-bottom:8px} .step-ico-img{position:absolute;top:1.2%;left:50%;transform:translateX(-50%); width:26%;max-width:96px;height:auto;object-fit:contain;z-index:1} @media(min-width:992px){ .ico-img{width:56px;height:56px} .badges .ico-img{width:62px;height:62px} .type-ico-img{width:52px;height:52px} .step-ico-img{width:26%;max-width:96px;top:1.2%} }