/* ========================================================================== asystentkontraktu.pl - jeden arkusz dla całej strony (landing + instrukcja). Bez frameworków, bez webfontów: stos systemowy, ~20 KB przed gzipem. Kolory jak w panelu: granat (--navy), bursztyn (--amber), błękit (--brand). ========================================================================== */ :root { --navy: #0d1b2a; --navy-2: #142639; --navy-3: #1a3149; --brand: #1f4e79; --brand-dark: #16395a; --brand-light: #e8f0f7; --amber: #e8871a; --amber-dark: #c96f0c; --amber-soft: #fdf1e2; --ok: #1f7a3d; --ok-bg: #e7f5ec; --warn: #9a6700; --warn-bg: #fff6e0; --danger: #a4262c; --danger-bg: #fdeaea; --ink: #17202a; --ink-2: #33414f; --muted: #5f6d7b; --line: #dfe3e8; --line-soft: #eef1f4; --bg: #f6f7f9; --surface: #ffffff; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 6px rgba(16, 24, 40, .08); --shadow-lg: 0 12px 40px rgba(13, 27, 42, .18); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; --wrap: 1180px; --wrap-narrow: 860px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--navy); font-weight: 700; } h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.025em; } h2 { font-size: clamp(1.55rem, 2.8vw, 2.25rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } code, kbd { font-family: var(--mono); font-size: .86em; } code { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: .08em .4em; white-space: normal; overflow-wrap: anywhere; color: var(--navy); } kbd { background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: .05em .45em; color: var(--ink-2); } strong { font-weight: 700; } .skip { position: absolute; left: -999px; top: 0; background: var(--amber); color: #000; padding: .5rem 1rem; z-index: 100; } .skip:focus { left: 1rem; top: 1rem; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; min-width: 0; } .wrap--narrow { max-width: var(--wrap-narrow); } .muted { color: var(--muted); } .small { font-size: .92rem; } .kicker { display: inline-block; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-dark); font-weight: 600; margin-bottom: .9rem; } .lead { font-size: 1.22rem; line-height: 1.55; color: var(--ink-2); max-width: 44em; } .tlo-ciemne .kicker { color: #f0a04b; } .tlo-ciemne .lead { color: #c6d3e0; } /* ---------------------------------------------------------------- Przyciski */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: 1rem; line-height: 1.2; padding: .8rem 1.35rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform .12s, box-shadow .12s, background .12s; font-family: inherit; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--amber); color: #1a1000; border-color: var(--amber); box-shadow: 0 6px 18px rgba(232, 135, 26, .28); } .btn--primary:hover { background: #f29a37; } .btn--navy { background: var(--brand); color: #fff; border-color: var(--brand); } .btn--navy:hover { background: var(--brand-dark); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn--ghost:hover { background: rgba(255, 255, 255, .1); } .btn--outline { background: #fff; color: var(--navy); border-color: var(--line); } .btn--outline:hover { border-color: var(--navy); } .btn--lg { font-size: 1.08rem; padding: .95rem 1.6rem; } .btn--sm { font-size: .9rem; padding: .5rem .9rem; border-radius: 8px; } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } /* ---------------------------------------------------------------- Nagłówek */ .top { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line-soft); } .top .wrap { display: flex; align-items: center; gap: 1rem; height: 68px; max-width: 1320px; } .logo { display: flex; align-items: center; gap: .65rem; color: var(--navy); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; white-space: nowrap; } .logo:hover { text-decoration: none; } .logo .mark { width: 34px; height: 34px; border-radius: 9px; flex: none; } .logo .lzejsze { font-weight: 500; color: var(--muted); } .nav { display: flex; gap: .1rem; margin-left: auto; } .nav a { color: var(--ink-2); font-weight: 500; padding: .5rem .6rem; border-radius: 8px; font-size: .95rem; white-space: nowrap; } .nav a:hover { background: var(--bg); text-decoration: none; color: var(--navy); } .nav a.on { color: var(--navy); background: var(--brand-light); } .top-cta { display: flex; gap: .5rem; } .top-cta .btn { padding: .6rem .9rem; font-size: .94rem; } .burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; width: 42px; height: 42px; cursor: pointer; color: var(--navy); font-size: 1.2rem; } .mobile-nav { display: none; border-top: 1px solid var(--line-soft); background: #fff; } .mobile-nav[data-open="1"] { display: block; } .mobile-nav .wrap { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 22px 1.2rem; height: auto; } .mobile-nav a { padding: .6rem .5rem; color: var(--navy); font-weight: 500; border-radius: 8px; } .mobile-nav a:hover { background: var(--bg); text-decoration: none; } .mobile-nav .btn { margin-top: .6rem; } @media (max-width: 1260px) { .top-cta .btn--outline { display: none; } .nav a { padding: .5rem .5rem; font-size: .92rem; } } /* Menu chowa sie do przycisku ponizej 1100 px: przy osmiu pozycjach i dwoch przyciskach pasek potrzebuje 1073 px okna (zmierzone), a nizej wychodzil poza ekran. */ @media (max-width: 1100px) { .nav, .top-cta { display: none; } .burger { display: inline-flex; align-items: center; justify-content: center; } } /* ---------------------------------------------------------------- Sekcje */ section { padding: 5.5rem 0; } @media (max-width: 760px) { section { padding: 3.6rem 0; } } .tlo-ciemne { background: var(--navy); color: #e6edf4; } .tlo-ciemne h1, .tlo-ciemne h2, .tlo-ciemne h3 { color: #fff; } .tlo-ciemne p { color: #c6d3e0; } .tlo-ciemne a:not(.btn) { color: #f0a04b; } .tlo-szare { background: var(--bg); } .sek-naglowek { max-width: 46em; margin-bottom: 2.6rem; } .sek-naglowek.srodek { margin-left: auto; margin-right: auto; text-align: center; } .sek-naglowek .lead { margin-bottom: 0; } .sek-naglowek.srodek .lead { margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------- Hero */ .hero { position: relative; overflow: hidden; padding: 5.5rem 0 0; background: radial-gradient(1200px 600px at 80% -10%, #1f4e79 0%, rgba(31, 78, 121, 0) 60%), linear-gradient(180deg, #0d1b2a 0%, #0f2033 100%); } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000 0%, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); pointer-events: none; } .hero .wrap { position: relative; } .hero-tekst { max-width: 760px; } .hero h1 { color: #fff; margin-bottom: 1.1rem; } .hero h1 em { font-style: normal; color: #f0a04b; } .hero .lead { color: #c6d3e0; font-size: 1.28rem; margin-bottom: 1.8rem; } .hero-zaufanie { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.6rem; color: #9fb3c8; font-size: .92rem; } .hero-zaufanie span::before { content: "✓"; color: #6dd39a; margin-right: .45rem; font-weight: 700; } .hero-zrzut { margin: 3.4rem auto 0; max-width: 1180px; position: relative; } .hero-zrzut .ramka { margin-bottom: -2px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .35); } .hero-zrzut .ramka img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Ramka przeglądarki wokół zrzutu */ .ramka { background: #fff; border-radius: 12px; border: 1px solid rgba(13, 27, 42, .12); box-shadow: var(--shadow-lg); overflow: hidden; } .ramka .pasek { display: flex; align-items: center; gap: .45rem; height: 34px; padding: 0 12px; background: #eef1f4; border-bottom: 1px solid var(--line); } .ramka .pasek i { width: 10px; height: 10px; border-radius: 50%; background: #d0d6dd; } .ramka .pasek i:nth-child(1) { background: #f26d6d; } .ramka .pasek i:nth-child(2) { background: #f6bd52; } .ramka .pasek i:nth-child(3) { background: #62c46c; } .ramka .pasek .adres { margin-left: .5rem; flex: 1; height: 20px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 18px; padding: 0 .6rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ramka img { width: 100%; height: auto; display: block; } /* ---------------------------------------------------------------- Pasek liczb / dowodów */ .liczby { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .liczby div { background: #fff; padding: 1.4rem 1.2rem; } .liczby b { display: block; font-size: 1.9rem; color: var(--navy); letter-spacing: -.02em; line-height: 1.1; } .liczby span { color: var(--muted); font-size: .95rem; } @media (max-width: 760px) { .liczby { grid-template-columns: repeat(2, 1fr); } } /* ---------------------------------------------------------------- Siatki kart */ .siatka { display: grid; gap: 1.2rem; } .siatka--2 { grid-template-columns: repeat(2, 1fr); } .siatka--3 { grid-template-columns: repeat(3, 1fr); } .siatka--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .siatka--3, .siatka--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .siatka--2, .siatka--3, .siatka--4 { grid-template-columns: 1fr; } } .karta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.3rem; box-shadow: var(--shadow); } .karta h3 { margin-top: .2rem; font-size: 1.12rem; } .karta p, .karta li { color: var(--ink-2); font-size: .98rem; } .karta p:last-child { margin-bottom: 0; } .karta ul { padding-left: 1.1rem; margin: 0; } .karta .ikona { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-light); color: var(--brand); display: grid; place-items: center; margin-bottom: 1rem; } .karta .ikona svg { width: 22px; height: 22px; } .karta--ciemna { background: var(--navy-2); border-color: rgba(255, 255, 255, .1); color: #dbe5ef; } .karta--ciemna h3 { color: #fff; } .karta--ciemna p, .karta--ciemna li { color: #c6d3e0; } .karta--ciemna .ikona { background: rgba(255, 255, 255, .08); color: #f0a04b; } .karta--wyroznik { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } .plakietka { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: var(--brand-light); color: var(--brand); } .plakietka--ok { background: var(--ok-bg); color: var(--ok); } .plakietka--amber { background: var(--amber-soft); color: var(--amber-dark); } /* Bento */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; } .bento .karta { grid-column: span 2; } .bento .karta.szeroka { grid-column: span 3; } .bento .karta.pelna { grid-column: span 6; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; } @media (max-width: 980px) { .bento .karta, .bento .karta.szeroka { grid-column: span 3; } .bento .karta.pelna { grid-column: span 6; grid-template-columns: 1fr; } } @media (max-width: 640px) { .bento .karta, .bento .karta.szeroka { grid-column: span 6; } } /* Kroki */ .kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: krok; } .kroki > div { position: relative; padding: 1.6rem 1.5rem 1.4rem 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .kroki > div::before { counter-increment: krok; content: counter(krok); position: absolute; top: -16px; left: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .95rem; box-shadow: 0 0 0 4px #fff; } .kroki h3 { margin-top: .3rem; } .kroki p { color: var(--ink-2); font-size: .98rem; margin-bottom: 0; } @media (max-width: 860px) { .kroki { grid-template-columns: 1fr; } } /* Reflektor funkcji: tekst + zrzut */ .reflektor { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: center; } .reflektor.odwrot .reflektor-tekst { order: 2; } .reflektor-tekst h2 { margin-bottom: .8rem; } .reflektor-tekst ul { padding-left: 0; list-style: none; margin: 1.2rem 0 1.6rem; } .reflektor-tekst li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; color: var(--ink-2); } .reflektor-tekst li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 16px; border-radius: 50%; background: var(--ok-bg); border: 1px solid #b9dfcd; } .reflektor-tekst li::after { content: ""; position: absolute; left: 5px; top: calc(.5em + 4px); width: 5px; height: 8px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); } .tlo-ciemne .reflektor-tekst li { color: #c6d3e0; } @media (max-width: 900px) { .reflektor { grid-template-columns: 1fr; gap: 1.8rem; } .reflektor.odwrot .reflektor-tekst { order: 0; } } /* Polecenia mailowe jako „czat” */ .polecenia-demo { display: grid; gap: .6rem; } .polecenia-demo .msg { max-width: 92%; padding: .7rem 1rem; border-radius: 14px; font-size: .95rem; line-height: 1.45; } .polecenia-demo .ja { background: var(--brand); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; } .polecenia-demo .ja code { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .25); color: #fff; } .polecenia-demo .as { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink-2); } .polecenia-demo .as b { color: var(--ok); } .tlo-ciemne .polecenia-demo .as { background: var(--navy-3); border-color: rgba(255, 255, 255, .12); color: #dbe5ef; } .tlo-ciemne .polecenia-demo .as b { color: #6dd39a; } /* Oś dnia */ .dzien { position: relative; padding-left: 2.2rem; } .dzien::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .dzien > div { position: relative; padding: 0 0 1.6rem; } .dzien > div::before { content: ""; position: absolute; left: -2.2rem; top: .35rem; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--amber); box-sizing: border-box; } .dzien time { font-family: var(--mono); font-size: .82rem; color: var(--amber-dark); font-weight: 600; letter-spacing: .04em; } .dzien h3 { font-size: 1.05rem; margin: .2rem 0 .3rem; } .dzien p { color: var(--ink-2); font-size: .98rem; margin: 0; } /* Cytat / scenariusz */ .scenariusz { border-left: 4px solid var(--amber); background: var(--amber-soft); padding: 1.1rem 1.4rem; border-radius: 0 var(--radius) var(--radius) 0; } .scenariusz p { margin: 0; color: var(--ink-2); } /* FAQ */ .faq { border-bottom: 1px solid var(--line); padding: .2rem 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: .9rem 2.2rem .9rem 0; list-style: none; position: relative; color: var(--navy); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: .2rem; top: .7rem; font-size: 1.4rem; color: var(--muted); font-weight: 400; transition: transform .15s; } .faq[open] summary::after { transform: rotate(45deg); } .faq p { color: var(--ink-2); margin: 0 0 1rem; } .faq ul { color: var(--ink-2); margin: 0 0 1rem; } /* CTA końcowe */ .cta-koncowe { text-align: center; } .cta-koncowe h2 { max-width: 20em; margin: .4rem auto 1rem; } .cta-koncowe .lead { margin: 0 auto 1.8rem; } .cta-koncowe .btn-row { justify-content: center; } .cta-koncowe .drobne { margin-top: 1.2rem; color: #9fb3c8; font-size: .9rem; } /* ---------------------------------------------------------------- Stopka */ .stopka { background: #0a1521; color: #9fb3c8; padding: 3.2rem 0 2rem; font-size: .93rem; } .stopka a { color: #c6d3e0; } .stopka h2 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .8rem; font-family: var(--mono); } .stopka-siatka { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } .stopka ul { list-style: none; padding: 0; margin: 0; } .stopka li { margin-bottom: .45rem; } .stopka .logo { color: #fff; margin-bottom: .8rem; } .stopka .logo .lzejsze { color: #9fb3c8; } .stopka-dol { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.4rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; font-size: .85rem; } @media (max-width: 860px) { .stopka-siatka { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .stopka-siatka { grid-template-columns: 1fr; } } /* ========================================================================== Instrukcja (dokumentacja) ========================================================================== */ .doc-hero { padding: 3.6rem 0 2.6rem; background: linear-gradient(180deg, var(--bg) 0%, #fff 100%); border-bottom: 1px solid var(--line-soft); } .doc-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: .6rem; } .doc-hero .lead { margin-bottom: 0; } .okruszki { font-size: .88rem; color: var(--muted); margin-bottom: 1.1rem; } .okruszki a { color: var(--muted); } .okruszki span { margin: 0 .45rem; } .doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 3.2rem; padding: 2.6rem 0 5rem; align-items: start; } .doc-toc { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; font-size: .9rem; padding-right: .5rem; scrollbar-width: thin; } .doc-toc strong { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; } .doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-soft); } .doc-toc li a { display: block; padding: .3rem .8rem; color: var(--ink-2); margin-left: -2px; border-left: 2px solid transparent; line-height: 1.35; } .doc-toc li a:hover { color: var(--navy); text-decoration: none; border-left-color: var(--line); } .doc-toc li a.on { color: var(--navy); font-weight: 600; border-left-color: var(--amber); } .doc-toc li.h3 a { padding-left: 1.6rem; font-size: .84rem; color: var(--muted); } .doc-toc .rozdzialy { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); } .doc-toc .rozdzialy a { display: block; padding: .3rem 0; color: var(--brand); } .doc-body { max-width: 780px; font-size: 1.02rem; } .doc-body > h1 { display: none; } /* Tytuł i akapit wstępny stoją już w nagłówku rozdziału - w treści byłyby drugi raz. */ .doc-body > h1 + p.lead { display: none; } .doc-body > .lead { display: none; } .doc-body h2 { margin-top: 3.2rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); scroll-margin-top: 88px; font-size: 1.7rem; } .doc-body h2:first-of-type { margin-top: .6rem; border-top: 0; padding-top: 0; } .doc-body h3 { margin-top: 2rem; scroll-margin-top: 88px; font-size: 1.22rem; } .doc-body h4 { margin-top: 1.4rem; font-size: 1.02rem; } .doc-body p, .doc-body li { line-height: 1.65; color: var(--ink-2); } .doc-body li { margin-bottom: .35rem; } .doc-body ul, .doc-body ol { padding-left: 1.4rem; } .doc-body strong { color: var(--ink); } .doc-body a { text-decoration: underline; text-decoration-color: rgba(31, 78, 121, .35); text-underline-offset: 3px; } .doc-body a:hover { text-decoration-color: var(--brand); } .doc-body img { border-radius: 0; } .h2-link { color: var(--line); font-weight: 400; text-decoration: none !important; margin-left: .4rem; font-size: .8em; opacity: 0; } h2:hover .h2-link, h3:hover .h2-link { opacity: 1; } /* Zrzuty */ .shot { margin: 1.6rem 0 2.2rem; } .shot .ramka { cursor: zoom-in; } .shot figcaption { font-size: .9rem; color: var(--muted); margin-top: .65rem; line-height: 1.5; } .shot--narrow { max-width: 640px; } .shot--narrow .ramka .pasek { display: none; } .shot--narrow .ramka { background: #f4f6f8; border-radius: 12px; } /* Filmik: animowany WebP z własnym paskiem podpisu, więc bez ramki przeglądarki. */ .film { margin: 1.8rem 0 2.4rem; } .film img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(13, 27, 42, .12); box-shadow: var(--shadow-lg); } .film figcaption { font-size: .9rem; color: var(--muted); margin-top: .65rem; line-height: 1.5; } .film figcaption b { color: var(--navy); font-weight: 600; } .shot--narrow .ramka img { width: 100%; } .diagram { margin: 1.6rem 0 2.2rem; } .diagram svg { width: 100%; height: auto; } .diagram figcaption { font-size: .9rem; color: var(--muted); margin-top: .5rem; } /* Wyróżnienia */ .callout { border-left: 4px solid var(--brand); background: var(--brand-light); padding: .9rem 1.2rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.4rem 0; } .callout p { margin: 0; } .callout p + p { margin-top: .6rem; } .callout--tip { border-left-color: var(--ok); background: var(--ok-bg); } .callout--warn { border-left-color: var(--amber); background: var(--amber-soft); } .steps { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; counter-reset: s; } .steps li { position: relative; padding-left: 3rem; margin-bottom: 1rem; } .steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .92rem; } .tbl-wrap { overflow-x: auto; margin: 1.2rem 0 1.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); } .tbl { width: 100%; border-collapse: collapse; font-size: .94rem; } .tbl th, .tbl td { text-align: left; vertical-align: top; padding: .65rem .8rem; border-bottom: 1px solid var(--line-soft); } .tbl thead th { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg); } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl td code { white-space: normal; } .tbl td:first-child { white-space: nowrap; } .tbl td:first-child code { white-space: nowrap; overflow-wrap: normal; } .cards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 1.2rem 0 1.8rem; } .cards .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; } .cards .card h3, .cards .card .card-title { font-size: 1rem; margin: 0 0 .5rem; font-weight: 700; color: var(--navy); line-height: 1.3; } .cards .card ul { margin: 0; padding-left: 1.1rem; font-size: .93rem; } .cards .card li { margin-bottom: .3rem; } .cards .card p { font-size: .93rem; margin: 0; } .good-bad { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1.2rem 0 1.8rem; } .good-bad > div { border-radius: var(--radius-sm); padding: .9rem 1.1rem; font-size: .95rem; } .good-bad b { display: block; margin-bottom: .35rem; } .good { background: var(--ok-bg); border: 1px solid #b9dfcd; } .bad { background: var(--danger-bg); border: 1px solid #f1b8bb; } .doc-body .faq summary { font-size: 1rem; } /* Hub instrukcji */ .rozdzialy-siatka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 2rem 0; } .rozdzial { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); color: inherit; transition: border-color .12s, transform .12s; } .rozdzial:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-2px); } .doc-body a.rozdzial { text-decoration: none; } .rozdzial h3 { margin: .3rem 0 .4rem; } .rozdzial p { color: var(--ink-2); font-size: .96rem; margin: 0; } .rozdzial .nr { font-family: var(--mono); font-size: .78rem; color: var(--amber-dark); letter-spacing: .1em; } @media (max-width: 700px) { .rozdzialy-siatka { grid-template-columns: 1fr; } } .nastepny { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .nastepny a { font-weight: 600; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8, 15, 24, .9); display: none; align-items: center; justify-content: center; padding: 2vh 2vw; cursor: zoom-out; } .lightbox[data-open="1"] { display: flex; } .lightbox img { max-width: 96vw; max-height: 96vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 20px 80px rgba(0, 0, 0, .6); background: #fff; } .lightbox button { position: absolute; top: 14px; right: 18px; background: rgba(255, 255, 255, .12); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; } @media (max-width: 900px) { /* minmax(0, 1fr), a nie 1fr: „1fr" ma minimum równe najszerszej treści, więc jeden szeroki element rozpychał całą stronę poza ekran telefonu. */ .doc { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } /* min-width: 0 - bez tego długi tytuł rozdziału rozpycha kolumnę siatki poza ekran telefonu i cała strona jedzie w bok (zmierzone 22.09.2026 na każdym rozdziale). */ .doc-toc { position: static; max-height: none; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; background: var(--bg); } .doc-toc a { overflow-wrap: anywhere; } .doc-toc ol { border-left: 0; } .doc-toc li a { border-left: 0; padding-left: 0; } .doc-toc li.h3 { display: none; } } @media print { .top, .stopka, .doc-toc, .lightbox, .nastepny, .cta-koncowe { display: none !important; } .doc { display: block; } body { font-size: 11pt; } } /* pasek zgody na statystyki (tylko gdy strona ma ustawione GA_ID) */ .pasek-zgody { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; max-width: 820px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 38px rgba(13, 27, 42, .2); } .pasek-zgody[hidden] { display: none; } .pasek-zgody p { margin: 0; flex: 1 1 320px; font-size: .92rem; line-height: 1.5; color: var(--ink-2); } .pasek-zgody-akcje { display: flex; flex-wrap: wrap; gap: .5rem; } @media (max-width: 560px) { .pasek-zgody { left: .6rem; right: .6rem; bottom: .6rem; padding: .9rem 1rem; } } /* ---- Oferta w skrócie (strona główna) ---- */ .oferta-pas .pas-kafle { margin-top: .4rem; } .pas-kafel { display: block; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.3rem; color: #e6edf4; text-decoration: none; transition: background .15s, transform .15s; } .pas-kafel:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); } .pas-kafel .ikona { width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #f0a04b; display: grid; place-items: center; margin-bottom: .9rem; } .pas-kafel .ikona svg { width: 24px; height: 24px; } .pas-kafel b { display: block; font-size: 1.15rem; color: #fff; margin-bottom: .35rem; } .pas-kafel span { color: #c6d3e0; font-size: .95rem; } .pas-kafel--wyroznik { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232, 135, 26, .25); } .btn-row.srodek { justify-content: center; margin-top: 2rem; } /* ---- Strona oferty ---- */ .oferta-hero { padding: 4.5rem 0 3.5rem; background: radial-gradient(1200px 600px at 50% -20%, #1f4e79 0%, rgba(31, 78, 121, 0) 60%), linear-gradient(180deg, #0d1b2a 0%, #0f2033 100%); } .oferta-hero h1 { color: #fff; max-width: 18em; margin-left: auto; margin-right: auto; } .oferta-hero h1 em { font-style: normal; color: #f0a04b; display: block; } .oferta-hero .sek-naglowek { margin-bottom: 2.4rem; } .wybor { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 980px; margin: 0 auto; } .kafel { display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: 16px; padding: 1.8rem 1.8rem 1.5rem; text-decoration: none; border: 2px solid transparent; box-shadow: var(--shadow-lg); transition: transform .15s; } .kafel:hover { transform: translateY(-3px); } .kafel--platforma { border-color: var(--brand); } .kafel--serwer { border-color: var(--amber); } .kafel-ilustracja { height: 96px; margin-bottom: 1.1rem; display: grid; place-items: center; border-radius: 12px; } .kafel--platforma .kafel-ilustracja { background: var(--brand-light); color: var(--brand); } .kafel--serwer .kafel-ilustracja { background: var(--amber-soft); color: var(--amber-dark); } .kafel-ilustracja svg { width: 132px; height: 92px; } .kafel-etykieta { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; color: var(--navy); line-height: 1.15; } .kafel-cena { display: inline-block; align-self: flex-start; margin: .6rem 0 1rem; font-size: .84rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; } .kafel--platforma .kafel-cena { background: var(--brand-light); color: var(--brand); } .kafel--serwer .kafel-cena { background: var(--amber-soft); color: var(--amber-dark); } .kafel ul { list-style: none; padding: 0; margin: 0 0 1.2rem; } .kafel li { position: relative; padding-left: 1.6rem; margin-bottom: .45rem; font-size: 1.02rem; color: var(--ink); } .kafel li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; } .kafel-link { margin-top: auto; font-weight: 700; color: var(--brand); } .kafel--serwer .kafel-link { color: var(--amber-dark); } .kafel-link::after { content: " →"; } .pas-test { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; max-width: 980px; margin: 1.4rem auto 0; padding: 1.1rem 1.6rem; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #e6edf4; text-decoration: none; } .pas-test:hover { background: rgba(255, 255, 255, .1); } .pas-test-liczba { font-size: 2.6rem; font-weight: 800; color: #f0a04b; line-height: 1; letter-spacing: -.03em; } .pas-test-tekst { color: #c6d3e0; font-size: 1.02rem; } .pas-test-tekst b { color: #fff; } .oferta-dane { padding-bottom: 1rem; } .diagramy { align-items: stretch; } .diagram-karta { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1rem .4rem; box-shadow: var(--shadow); } .diagram-karta--wyroznik { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); } .diagram-karta svg { width: 100%; height: auto; display: block; font-family: var(--font); } .diagram-karta figcaption { padding: .6rem .4rem .8rem; color: var(--ink-2); font-size: .98rem; } .reflektor-tekst .dla { color: var(--muted); font-size: .95rem; margin: -.4rem 0 1.4rem; } .reflektor-tekst .plakietka { margin-bottom: .9rem; } .opieka-karta { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.4rem; box-shadow: var(--shadow); align-self: center; } .opieka-karta .ikona { width: 46px; height: 46px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin-bottom: .9rem; } .opieka-karta .ikona svg { width: 24px; height: 24px; } .opieka-karta h3 { margin: .6rem 0 .5rem; font-size: 1.3rem; } .opieka-karta ul { padding-left: 1.1rem; margin: .6rem 0 1rem; } .opieka-karta li { margin: .3rem 0; color: var(--ink-2); } .opieka-stopka { margin: 0; padding-top: .9rem; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: .95rem; } .porownanie .tbl td:first-child { color: var(--muted); } .porownanie .tbl td:nth-child(3) { background: #fffaf3; } .porownanie .tbl thead th:nth-child(3) { color: var(--amber-dark); } @media (max-width: 860px) { .wybor, .pas-kafle { grid-template-columns: 1fr; } .pas-test { grid-template-columns: auto 1fr; } .pas-test .btn { grid-column: 1 / -1; justify-self: start; } .diagramy { grid-template-columns: 1fr; } } /* ---- Panel kontaktowy ---- */ .panel-kontakt { position: fixed; inset: 0; z-index: 90; } .panel-kontakt[hidden] { display: none; } .panel-kontakt-tlo { position: absolute; inset: 0; background: rgba(13, 27, 42, .55); } .panel-kontakt-okno { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff; overflow-y: auto; padding: 2.2rem 2rem 2.4rem; box-shadow: var(--shadow-lg); animation: panel-wjazd .22s ease-out; } .panel-kontakt-okno h2 { margin: 0 0 .5rem; font-size: 1.6rem; } .panel-kontakt-okno .lead { font-size: 1rem; margin-bottom: 1.4rem; } .panel-kontakt-zamknij { position: absolute; top: .9rem; right: .9rem; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); } .panel-kontakt-zamknij:hover { color: var(--ink); border-color: var(--muted); } body.panel-otwarty { overflow: hidden; } @keyframes panel-wjazd { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .panel-kontakt-okno { animation: none; } } /* ---- Formularz ---- */ .formularz-kontakt .pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .formularz-kontakt fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; } .formularz-kontakt legend, .formularz-kontakt label { font-weight: 600; font-size: .95rem; color: var(--ink); } .formularz-kontakt legend { margin-bottom: .5rem; } .tematy { display: flex; flex-wrap: wrap; gap: .5rem; } .tematy label { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 500; background: #fff; } .tematy label:has(input:checked) { border-color: var(--brand); background: var(--brand-light); color: var(--brand); font-weight: 600; } .tematy input { margin: 0; accent-color: var(--brand); } .formularz-kontakt .pola { gap: .9rem 1rem; margin-bottom: .9rem; } .formularz-kontakt .pole { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; } .formularz-kontakt .pola .pole { margin-bottom: 0; } .formularz-kontakt input[type="text"], .formularz-kontakt input[type="email"], .formularz-kontakt input[type="tel"], .formularz-kontakt textarea { font: inherit; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); width: 100%; } .formularz-kontakt input:focus, .formularz-kontakt textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); } .formularz-kontakt [aria-invalid="true"] { border-color: var(--danger); } .formularz-kontakt textarea { resize: vertical; min-height: 6rem; } .formularz-kontakt .zgoda { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .92rem; color: var(--ink-2); margin: .2rem 0 1rem; cursor: pointer; } .formularz-kontakt .zgoda input { margin-top: .25rem; accent-color: var(--brand); } .formularz-kontakt .blad { color: var(--danger); font-size: .88rem; margin: 0; } .formularz-kontakt .blad[hidden] { display: none; } .formularz-kontakt .btn-row { align-items: center; gap: 1rem; } .formularz-kontakt .drobne { color: var(--muted); font-size: .9rem; } .formularz-kontakt .komunikat { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-weight: 500; } .formularz-kontakt .komunikat[hidden] { display: none; } .formularz-kontakt .komunikat.ok { background: var(--ok-bg); color: var(--ok); } .formularz-kontakt .komunikat.err { background: var(--danger-bg); color: var(--danger); } .formularz-kontakt.wyslany fieldset, .formularz-kontakt.wyslany .pola, .formularz-kontakt.wyslany .pole, .formularz-kontakt.wyslany .zgoda, .formularz-kontakt.wyslany .btn-row { display: none; } .kontakt-karta { padding: 2rem; } .kontakt-strona h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); } /* ========================================================================== Rysunki kreskowe: filmy (sceny z krokami obok) i małe rysunki z ruchem. Klasa .kreska na kontenerze daje tusz, kolory i ruch; .film-kreska z data-film to film, którego sceny przełącza site.js - bez skryptu zostaje pierwsza scena i pierwszy krok. Pierwszy był film w rozdziale o listach (22.09.2026), stąd jego reguły pod [data-film="listy"]. ========================================================================== */ .film-kreska { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; margin: 2rem 0 2.8rem; } .film-kreska__scena { position: sticky; top: 86px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem .8rem; } .film-kreska svg { width: 100%; height: auto; display: block; } .film-kreska__pasek { display: flex; align-items: center; gap: .7rem; margin-top: .2rem; } .film-kreska__play { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; font: inherit; font-size: .82rem; padding: .25rem .8rem; cursor: pointer; } .film-kreska__play:hover { border-color: var(--brand); color: var(--brand); } .film-kreska__kropki { display: flex; gap: .35rem; flex: 1; } .film-kreska__kropki button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; } .film-kreska__kropki button[aria-selected="true"] { background: var(--amber); } /* Strzałki przód-tył: duże pole trafienia, bo cofa się nimi także palcem na telefonie. */ .film-kreska__strzalka { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 50%; font: inherit; font-size: 1.35rem; line-height: 1; padding: 0 0 3px; cursor: pointer; display: grid; place-items: center; } .film-kreska__strzalka:hover { border-color: var(--brand); color: var(--brand); } .film-kreska__strzalka:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .film-kreska__licznik { flex: none; min-width: 2.6rem; text-align: center; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* Obok animacji stoi JEDEN kafelek - ten od aktualnego kadru. Pozostałe czekają w tym samym miejscu, wyjęte z układu (position: absolute), a nie schowane przez display: none - inaczej licznik CSS przestałby je liczyć i każdy krok miałby numer 1. */ .film-kreska__kroki { list-style: none; counter-reset: fk; padding: 0; margin: 0; position: relative; align-self: center; } .film-kreska__kroki li { position: absolute; inset: 0 0 auto; opacity: 0; pointer-events: none; padding: 1.1rem 1.2rem 1.15rem 3.4rem; border: 1px solid var(--amber); border-radius: var(--radius-sm); background: var(--amber-soft); font-size: 1rem; line-height: 1.6; color: var(--ink-2); transition: opacity .3s ease; } .film-kreska__kroki li:first-child, .film-kreska[data-gotowy="1"] .film-kreska__kroki li.on { position: relative; inset: auto; opacity: 1; pointer-events: auto; } .film-kreska[data-gotowy="1"] .film-kreska__kroki li:first-child:not(.on) { position: absolute; inset: 0 0 auto; opacity: 0; pointer-events: none; } .film-kreska__kroki li::before { counter-increment: fk; content: counter(fk); position: absolute; left: 1rem; top: 1.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--amber); color: #23170a; font-weight: 700; font-size: .88rem; display: grid; place-items: center; } .film-kreska__kroki li b { display: block; color: var(--navy); font-size: 1.12rem; margin-bottom: .2rem; } /* Sceny leżą jedna na drugiej; widoczna jest jedna. Bez skryptu zostaje pierwsza. */ .film-kreska .scena { opacity: 0; visibility: hidden; transition: opacity .35s ease; } .film-kreska .scena--1 { opacity: 1; visibility: visible; } .film-kreska[data-gotowy="1"] .scena--1 { opacity: 0; visibility: hidden; } .film-kreska[data-gotowy="1"] .scena.on { opacity: 1; visibility: visible; } /* Kreska: wszystko jednym piórem, kolor tuszu z motywu strony. */ .kreska .tusz { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .kreska .cienki { stroke-width: 1.6; } .kreska .but { stroke-width: 6; } .kreska .glowa { fill: #fff; } .kreska .kask { fill: #fff; stroke: var(--navy); stroke-width: 2.4; stroke-linejoin: round; } .kreska .kamizelka { fill: #f6c445; stroke: var(--navy); stroke-width: 2.2; stroke-linejoin: round; } .kreska .odblask { fill: none; stroke: #fff; stroke-width: 3; } .kreska .chmurka { fill: #fff; stroke: var(--navy); stroke-width: 2.2; stroke-linejoin: round; } .kreska .obudowa { fill: #fff; } .kreska .foto { fill: #fff; stroke: var(--navy); stroke-width: 2; } .kreska .ptaszek { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .kreska text { font-family: var(--font); fill: var(--navy); } .kreska .etykieta { font-size: 15px; fill: var(--ink-2); } .kreska .etykieta.maly, .kreska .mowa-tekst.maly { font-size: 12.5px; fill: var(--muted); } .kreska .mocny { font-weight: 700; fill: var(--navy); } .kreska .srodek { text-anchor: middle; } .kreska .mowa-tekst { font-size: 16px; fill: var(--ink-2); } .kreska .ekran-tekst { font-size: 13px; fill: var(--ink-2); } .kreska .ekran-tekst.po-terminie { fill: var(--danger); font-weight: 700; } .kreska .data { font-size: 46px; font-weight: 700; text-anchor: middle; } .kreska .znak { font-size: 40px; font-weight: 700; text-anchor: middle; fill: var(--danger); } /* Ruch. Każda scena ma jeden, najwyżej dwa - rysunek ma opowiadać, a nie migać. */ @keyframes fl-krok-l { from { transform: rotate(-13deg); } to { transform: rotate(15deg); } } @keyframes fl-krok-p { from { transform: rotate(15deg); } to { transform: rotate(-13deg); } } @keyframes fl-idzie { from { transform: translateX(-120px); } to { transform: translateX(150px); } } @keyframes fl-skrzypi { from { transform: rotate(0deg); } to { transform: rotate(-3deg); } } @keyframes fl-puls { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } @keyframes fl-blysk { 0%, 100% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: 0; } } @keyframes fl-leci { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(96px); opacity: 0; } } @keyframes fl-dzwoni { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } } @keyframes fl-rysuje { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } } @keyframes fl-odlatuje { from { transform: translate(0, 0); } to { transform: translate(40px, -28px); } } /* Noga obraca się w biodrze, czyli w rogu swojej ramki - „top center" odsuwałoby oś o pół kroku w bok i człowiek chodziłby bokiem. Ręce zostają nieruchome: przy tej grubości kreski machanie nimi zlewało się z tułowiem. */ .kreska .noga-l { transform-box: fill-box; transform-origin: top right; animation: fl-krok-l .62s ease-in-out infinite alternate; } .kreska .noga-p { transform-box: fill-box; transform-origin: top left; animation: fl-krok-p .62s ease-in-out infinite alternate; } .kreska .blysk { animation: fl-blysk 2.2s ease-in-out infinite; } .kreska .ptaszek { stroke-dasharray: 120; animation: fl-rysuje 1.4s ease-out infinite alternate; } /* Film w rozdziale o listach */ [data-film="listy"] .drzwi { transform-box: fill-box; transform-origin: left bottom; } [data-film="listy"] .budynek, [data-film="listy"] .zuraw { opacity: .45; } [data-film="listy"] .idzie { animation: fl-idzie 7s linear infinite; } [data-film="listy"] .scena--2 .drzwi { animation: fl-skrzypi 1.1s ease-in-out infinite alternate; } [data-film="listy"] .skrzyp, [data-film="listy"] .fale path { animation: fl-puls 1.2s ease-in-out infinite; } [data-film="listy"] .skrzyp + .skrzyp, [data-film="listy"] .fale path + path { animation-delay: .25s; } [data-film="listy"] .koperta--1, [data-film="listy"] .koperta--2 { animation: fl-leci 3.4s ease-in-out infinite; } [data-film="listy"] .koperta--2 { animation-delay: .5s; } [data-film="listy"] .dzwonek { transform-box: fill-box; transform-origin: top center; animation: fl-dzwoni .9s ease-in-out infinite; } [data-film="listy"] .pytanie .mocny { animation: fl-puls 1.8s ease-in-out infinite; } [data-film="listy"] .ptak-leci { animation: fl-odlatuje 2.4s ease-in-out infinite alternate; } /* Rysunek poza ekranem stoi (site.js dokłada .poza) - kilkanaście pętli naraz to zbędna praca. */ .kreska.poza * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .kreska * { animation: none !important; } .film-kreska .scena { transition: none; } } @media (max-width: 900px) { .film-kreska { grid-template-columns: 1fr; } .film-kreska__scena { position: static; } } /* Zrzut z telefonu: oryginał ma 430 px szerokości, szerzej robi się rozmyty. Zaokrąglona ramka bez paska adresu - to ekran aplikacji, nie strona w przeglądarce. */ .shot--telefon { max-width: 360px; } .shot--telefon .ramka { background: #f4f6f8; border-radius: 26px; padding: 6px; } .shot--telefon .ramka .pasek { display: none; } .shot--telefon .ramka img { border-radius: 20px; } /* Dwa zrzuty z telefonu obok siebie */ .dwa-telefony { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; align-items: start; margin: 1.4rem 0 2rem; } .dwa-telefony .shot { margin: 0; max-width: 320px; } /* ========================================================================== SEO 22.09.2026: menu funkcji, strony funkcji, wzór KZM, poradnik ========================================================================== */ /* Rozwijana lista stron funkcji w menu. Zwykłe w HTML - roboty i czytniki widzą je bez skryptu; lista otwiera się najechaniem albo fokusem z klawiatury. */ .nav { align-items: center; } .nav-grupa { position: relative; } .nav-grupa > a { display: inline-flex; align-items: center; gap: .45rem; } .nav-grupa > a::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); opacity: .55; } .nav-podmenu { display: none; position: absolute; top: 100%; left: -.5rem; z-index: 60; min-width: 330px; margin-top: 8px; padding: .45rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); flex-direction: column; } .nav-podmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav-grupa:hover .nav-podmenu, .nav-grupa:focus-within .nav-podmenu { display: flex; } .nav .nav-podmenu a { display: block; white-space: normal; padding: .55rem .75rem; font-size: .95rem; font-weight: 600; color: var(--navy); } .nav-podmenu small { display: block; margin-top: .1rem; font-weight: 400; font-size: .84rem; color: var(--muted); } /* Strona główna: slogan zostaje, fraza opisowa w tym samym H1 */ .hero h1 .sub { display: block; margin-top: 1rem; font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 600; letter-spacing: 0; line-height: 1.35; color: #c6d3e0; } .wiecej { font-weight: 600; white-space: nowrap; } .wiecej::after { content: " →"; } /* Strony funkcji */ .hero--funkcja { padding-top: 3.2rem; } .hero--funkcja h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); } .hero--funkcja .okruszki, .hero--funkcja .okruszki a { color: #9fb3c8; } .hero--bez-zrzutu { padding-bottom: 4.6rem; } .hero-zrzut .shot, .reflektor .shot { margin: 0; } .rozdzialy-siatka--3 { grid-template-columns: repeat(3, 1fr); margin: 0; } @media (max-width: 980px) { .rozdzialy-siatka--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .rozdzialy-siatka--3 { grid-template-columns: 1fr; } } .kroki--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .kroki--4 { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } } @media (max-width: 860px) { .kroki--4 { grid-template-columns: 1fr; } } .funkcja-strona .tbl-wrap { background: #fff; } .zobacz-funkcje { margin-top: 3rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); } .zobacz-funkcje p { margin: 0; } /* Wzór do pobrania */ .pobierz { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.4rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 2.2rem; box-shadow: var(--shadow); } .pobierz h2 { margin-bottom: .6rem; } .pobierz-pliki { display: grid; gap: .9rem; } .plik { display: grid; grid-template-columns: 48px 1fr; column-gap: 1rem; align-items: center; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--navy); transition: border-color .12s, transform .12s; } .plik:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-1px); } .plik::before { content: attr(data-rodzaj); grid-row: span 2; width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; font: 700 .74rem var(--mono); color: #fff; background: var(--brand); } .plik--pdf::before { background: var(--danger); } .plik b { font-size: 1.05rem; } .plik span { color: var(--muted); font-size: .9rem; } @media (max-width: 860px) { .pobierz { grid-template-columns: 1fr; padding: 1.5rem; } } /* Napisy w rysunkach SVG: poza opisem w wynikach wyszukiwania, bez wpływu na układ */ .bez-fragmentu { display: contents; } /* Poradnik */ .artykul-daty { margin: .9rem 0 0; color: var(--muted); font-size: .92rem; } .artykul { padding: 2.6rem 0 5rem; max-width: none; } .doc-body .jak-asystent { margin-top: 3rem; padding: 1.6rem 1.8rem; border-radius: var(--radius); background: var(--navy); } .doc-body .jak-asystent h2 { color: #fff; margin: .2rem 0 .5rem; padding: 0; border: 0; font-size: 1.4rem; } .doc-body .jak-asystent p { color: #c6d3e0; } .doc-body .jak-asystent .kicker { color: #f0a04b; margin-bottom: .3rem; } .doc-body .jak-asystent a.btn { text-decoration: none; } .poradnik-lista { margin: 2.6rem 0 5rem; } .poradnik-lista .rozdzial h2 { font-size: 1.25rem; margin: .3rem 0 .4rem; } .faq-dalej { margin: 1.4rem 0 0; color: var(--ink-2); } .shot--srodek { margin: 2.4rem auto 0; max-width: 860px; } /* ========================================================================== Kreska, ciąg dalszy: klocki z narzedzia/kreska.py (robot-asystent, dokumenty, pieczątki) i ruch wspólny wszystkich rysunków. Ruch jednego rysunku mieszka w jego własnym