/* CF_T — wspólny arkusz stylów. Paleta i typografia zdjęte z poprzedniej wersji strony (Astra/Elementor), żeby zachować rozpoznawalny wygląd: biel, ciepły złoty akcent, miękkie "neumorficzne" przyciski. */ :root { /* Mówi przeglądarce, że motywami zarządza sama strona. Bez tego Chrome (m.in. na Androidzie i przy systemowym trybie ciemnym) włącza własne automatyczne przyciemnianie i nadpisuje nasze kolory — złapane na żywo: po przełączeniu na tryb jasny tło zostawało ciemne. */ color-scheme: light; --tekst: #545454; --tekst-jasny: #8a8a8a; --tekst-slaby: #b7b7b7; --zloty: #a48c64; --zloty-ciemny: #8d764f; --tlo: #ffffff; --tlo-alt: #fafafa; --obramowanie: #ececec; --cien-mocny: rgba(0, 0, 0, 0.08); --cien-jasny: rgba(255, 255, 255, 0.9); --gora-tlo: rgba(255, 255, 255, 0.92); --przycisk-tlo: linear-gradient(145deg, #ffffff, #dcdcdc); --strata: #c0392b; --szer-tresci: 1080px; } /* Tryb nocny. Sterowany atrybutem `data-theme` na (wybór użytkownika, zapamiętany w localStorage) — a gdy użytkownik nic nie wybrał, ustawieniem systemowym. Złoty akcent zostaje, tylko rozjaśniony, żeby trzymał kontrast na ciemnym tle. */ :root[data-theme="dark"] { color-scheme: dark; --tekst: #e4e4e4; --tekst-jasny: #a3a3a3; --tekst-slaby: #6f7278; --zloty: #c2a878; --zloty-ciemny: #d9c298; --tlo: #16181c; --tlo-alt: #1b1e23; --obramowanie: #2b2f36; --cien-mocny: rgba(0, 0, 0, 0.5); --cien-jasny: rgba(255, 255, 255, 0.04); --gora-tlo: rgba(22, 24, 28, 0.92); --przycisk-tlo: linear-gradient(145deg, #23262c, #15171b); --strata: #e57368; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--tlo); color: var(--tekst); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; transition: background 0.2s ease, color 0.2s ease; } .srodek { width: 100%; max-width: var(--szer-tresci); margin: 0 auto; padding: 0 24px; } /* --- Nagłówek ---------------------------------------------------------- */ header.gora { position: sticky; top: 0; z-index: 10; background: var(--gora-tlo); backdrop-filter: blur(8px); border-bottom: 1px solid var(--obramowanie); } .gora .srodek { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; } .logo { height: 69px; width: auto; display: block; } /* Dwa pliki logo zamiast filtrów CSS: znak jest złoty, a napis szary — `invert()` przekłamałby złoto, więc ciemna wersja ma po prostu jasny napis. */ .logo-ciemne { display: none; } :root[data-theme="dark"] .logo-jasne { display: none; } :root[data-theme="dark"] .logo-ciemne { display: block; } nav.menu { display: flex; align-items: center; gap: 28px; } /* Przełącznik trybu nocnego — okrągły, w tej samej miękkiej konwencji co przyciski. Ikona zmienia się razem z motywem (księżyc/słońce). */ .przelacznik-motywu { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; flex: none; border: 0.7px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: var(--przycisk-tlo); box-shadow: 5px 5px 12px var(--cien-mocny), -5px -5px 12px var(--cien-jasny); color: var(--zloty); cursor: pointer; transition: box-shadow 0.15s ease, color 0.15s ease; } :root[data-theme="dark"] .przelacznik-motywu { border-color: rgba(255, 255, 255, 0.06); } .przelacznik-motywu:hover { color: var(--zloty-ciemny); box-shadow: 3px 3px 7px var(--cien-mocny), -3px -3px 7px var(--cien-jasny); } .przelacznik-motywu svg { width: 18px; height: 18px; } .przelacznik-motywu .slonce { display: none; } :root[data-theme="dark"] .przelacznik-motywu .ksiezyc { display: none; } :root[data-theme="dark"] .przelacznik-motywu .slonce { display: block; } nav.menu a { color: var(--tekst); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; transition: color 0.15s ease; } nav.menu a:hover { color: var(--zloty); } /* --- Przyciski --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 36px; border: 0.7px solid rgba(255, 255, 255, 0.7); border-radius: 28px; background: var(--przycisk-tlo); box-shadow: 6px 6px 14px var(--cien-mocny), -6px -6px 14px var(--cien-jasny); color: var(--zloty); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease; } :root[data-theme="dark"] .btn { border-color: rgba(255, 255, 255, 0.06); } .btn:hover { color: var(--zloty-ciemny); box-shadow: 3px 3px 8px var(--cien-mocny), -3px -3px 8px var(--cien-jasny); } .btn:active { transform: translateY(1px); } .btn.mniejszy { padding: 11px 24px; font-size: 13px; } .btn.plaski { background: none; box-shadow: none; border: 1px solid var(--obramowanie); } .btn[aria-disabled="true"] { color: var(--tekst-slaby); cursor: default; box-shadow: 3px 3px 8px var(--cien-mocny), -3px -3px 8px var(--cien-jasny); } /* --- Sekcje ------------------------------------------------------------ */ main { flex: 1; } section { padding: 72px 0; } section.alt { background: var(--tlo-alt); border-block: 1px solid var(--obramowanie); } h1 { font-size: 44px; font-weight: 800; line-height: 1.2; margin: 0 0 18px; letter-spacing: -0.5px; } h2 { font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--zloty); margin: 0 0 8px; } h3 { font-size: 26px; font-weight: 800; margin: 0 0 12px; } p.lead { font-size: 17px; color: var(--tekst-jasny); margin: 0 0 32px; } .hero { text-align: center; padding: 96px 0 80px; } .hero p.lead { max-width: 620px; margin-inline: auto; margin-bottom: 36px; } .hero .akcje { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .naglowek-sekcji { margin-bottom: 36px; max-width: 640px; } .naglowek-sekcji p { color: var(--tekst-jasny); margin: 0; } /* --- Jak to działa ----------------------------------------------------- */ .kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .krok .numer { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--zloty); margin-bottom: 10px; } .krok h4 { font-size: 18px; font-weight: 700; margin: 0 0 8px; } .krok p { margin: 0; color: var(--tekst-jasny); font-size: 15px; } /* --- Kafelki narzędzi -------------------------------------------------- */ .narzedzia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .narzedzie { display: flex; flex-direction: column; padding: 28px; border-radius: 18px; background: var(--tlo); border: 1px solid var(--obramowanie); box-shadow: 8px 8px 20px var(--cien-mocny), -8px -8px 20px var(--cien-jasny); transition: transform 0.15s ease, box-shadow 0.15s ease; } section.alt .narzedzie { background: var(--tlo); } .narzedzie:hover { transform: translateY(-3px); box-shadow: 10px 10px 24px var(--cien-mocny), -10px -10px 24px var(--cien-jasny); } .narzedzie .ikona { width: 44px; height: 44px; margin-bottom: 18px; color: var(--zloty); } .narzedzie h4 { font-size: 19px; font-weight: 700; margin: 0 0 8px; } .narzedzie p { margin: 0 0 22px; font-size: 15px; color: var(--tekst-jasny); flex: 1; } .narzedzie .stopka-kafla { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .znacznik { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tekst-slaby); } .znacznik.gotowe { color: var(--zloty); } /* --- Strona pojedynczego narzędzia ------------------------------------- */ /* Każde narzędzie ma własny adres (ruch z lejka/wyszukiwarki ląduje wprost na nim), ale ten sam nagłówek, stopkę i sekcję "powiązane" — żeby po załatwieniu sprawy użytkownik został w środowisku, a nie wyszedł. */ .okruszki { font-size: 13px; color: var(--tekst-slaby); padding-top: 28px; } .okruszki a { color: var(--tekst-jasny); text-decoration: none; } .okruszki a:hover { color: var(--zloty); } .naglowek-narzedzia { padding: 24px 0 8px; max-width: 720px; } .naglowek-narzedzia h1 { font-size: 36px; margin-bottom: 12px; } .naglowek-narzedzia p { color: var(--tekst-jasny); margin: 0; font-size: 16px; } .panel-narzedzia { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; margin: 36px 0 8px; align-items: start; } .karta { padding: 28px; border-radius: 18px; background: var(--tlo); border: 1px solid var(--obramowanie); box-shadow: 8px 8px 20px var(--cien-mocny), -8px -8px 20px var(--cien-jasny); } .pola { display: grid; gap: 18px; } .pole { display: flex; flex-direction: column; gap: 6px; } .pole label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-jasny); } .pole .wiersz-pola { position: relative; display: flex; align-items: center; } .pole input { width: 100%; padding: 13px 46px 13px 16px; border: 1px solid var(--obramowanie); border-radius: 12px; background: var(--tlo-alt); color: var(--tekst); font-family: inherit; font-size: 16px; font-weight: 600; outline: none; transition: border-color 0.15s ease, background 0.15s ease; } .pole input:focus { border-color: var(--zloty); background: var(--tlo); } .pole .jednostka { position: absolute; right: 16px; font-size: 13px; font-weight: 600; color: var(--tekst-slaby); pointer-events: none; } .wynik { display: grid; gap: 14px; } .wynik-glowny { padding-bottom: 16px; border-bottom: 1px solid var(--obramowanie); } .wynik-glowny .etykieta { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-jasny); margin-bottom: 6px; } .wynik-glowny .kwota { font-size: 40px; font-weight: 800; line-height: 1.1; color: var(--zloty); letter-spacing: -1px; } .wynik-wiersz { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .wynik-wiersz span:first-child { font-size: 14px; color: var(--tekst-jasny); } .wynik-wiersz span:last-child { font-size: 16px; font-weight: 700; } .wynik-wiersz.strata span:last-child { color: var(--strata); } .kwota.strata { color: var(--strata) !important; } .opis-narzedzia { max-width: 760px; } .opis-narzedzia h3 { font-size: 22px; margin-top: 32px; } .opis-narzedzia p { color: var(--tekst-jasny); } .opis-narzedzia ul { color: var(--tekst-jasny); padding-left: 20px; } .opis-narzedzia li { margin-bottom: 6px; } @media (max-width: 860px) { .panel-narzedzia { grid-template-columns: 1fr; } .naglowek-narzedzia h1 { font-size: 28px; } .wynik-glowny .kwota { font-size: 32px; } } /* --- Stopka ------------------------------------------------------------ */ footer.dol { background: var(--tlo-alt); border-top: 1px solid var(--obramowanie); padding: 44px 0 32px; font-size: 13px; color: var(--tekst-slaby); } footer.dol .kolumny { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; } footer.dol nav { display: flex; gap: 22px; flex-wrap: wrap; } footer.dol a { color: var(--tekst-jasny); text-decoration: none; } footer.dol a:hover { color: var(--zloty); } .nota { border-top: 1px solid var(--obramowanie); padding-top: 20px; line-height: 1.7; max-width: 780px; } /* --- Telefon ----------------------------------------------------------- */ @media (max-width: 860px) { h1 { font-size: 32px; } section { padding: 52px 0; } .hero { padding: 64px 0 52px; } .kroki, .narzedzia { grid-template-columns: 1fr; } nav.menu { gap: 16px; } nav.menu a { font-size: 12px; } .logo { height: 57px; } }