/* ===================================================================== edomeg.eu — arkusz stylów serwisu wizerunkowego TaxMachine --------------------------------------------------------------------- Dwa motywy: jasny (domyślny) i ciemny. • JS (theme-init.js) ustawia data-theme="jasny" | "ciemny" na na podstawie wyboru użytkownika (localStorage) albo ustawień systemu. • Bez JS działa fallback: @media (prefers-color-scheme: dark). Zero bibliotek zewnętrznych, zero CDN. Animacje wyłączane przy prefers-reduced-motion. ===================================================================== */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } ul[class], ol[class] { list-style: none; padding: 0; } /* ---------- Tokeny: motyw jasny (domyślny) ---------- */ :root { /* Kolory tła i powierzchni */ --tlo: #f6f5f0; /* ciepła biel papieru */ --tlo-alt: #edece4; /* sekcje naprzemienne */ --powierzchnia: #ffffff; /* karty */ --powierzchnia-2: #fbfaf6; /* karty na tle alt */ /* Tekst */ --atrament: #171d1a; /* prawie czerń z nutą zieleni */ --atrament-2: #45514b; /* tekst drugorzędny */ --wyciszony: #6d7873; /* podpisy, metadane */ /* Akcent (zieleń finansowa) */ --akcent: #0d7a55; --akcent-mocny: #0a5f43; --akcent-tlo: #e2f1ea; /* delikatne tło pod plakietki */ --akcent-kontrast: #ffffff; /* tekst na akcencie */ --ikona-tlo: #0d7a55; /* tło plakietek ikon (białe kreski) — stałe w obu motywach dla kontrastu */ /* Linie i cienie */ --linia: #dedcd2; --linia-mocna: #c9c7bb; --cien: 0 1px 2px rgba(23, 29, 26, .05), 0 8px 28px rgba(23, 29, 26, .07); /* Nagłówek strony (pasek z rozmyciem) */ --naglowek-tlo: rgba(246, 245, 240, .82); /* Stany pomocnicze */ --ok: #0d7a55; --blad: #b3362b; --blad-tlo: #f8e9e7; --font-sans: "Inter", "Sora", "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif; --font-mono: "Cascadia Code", "Consolas", ui-monospace, "SF Mono", "Menlo", monospace; --promien: 14px; --promien-maly: 9px; --szerokosc: 1200px; --szerokosc-wasko: 780px; color-scheme: light; } /* ---------- Tokeny: motyw ciemny ---------- */ [data-theme="ciemny"] { --tlo: #101512; --tlo-alt: #151b17; --powierzchnia: #1a211c; --powierzchnia-2: #1e2620; --atrament: #eaeee9; --atrament-2: #b4beb6; --wyciszony: #8a958d; --akcent: #46c795; --akcent-mocny: #63d5a8; --akcent-tlo: #1c2f26; --akcent-kontrast: #0c1410; --linia: #263029; --linia-mocna: #35423a; --cien: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 32px rgba(0, 0, 0, .38); --naglowek-tlo: rgba(16, 21, 18, .82); --ok: #46c795; --blad: #ef8377; --blad-tlo: #33201d; color-scheme: dark; } /* Fallback bez JavaScript: szanuj ustawienia systemowe */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --tlo: #101512; --tlo-alt: #151b17; --powierzchnia: #1a211c; --powierzchnia-2: #1e2620; --atrament: #eaeee9; --atrament-2: #b4beb6; --wyciszony: #8a958d; --akcent: #46c795; --akcent-mocny: #63d5a8; --akcent-tlo: #1c2f26; --akcent-kontrast: #0c1410; --linia: #263029; --linia-mocna: #35423a; --cien: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 32px rgba(0, 0, 0, .38); --naglowek-tlo: rgba(16, 21, 18, .82); --ok: #46c795; --blad: #ef8377; --blad-tlo: #33201d; color-scheme: dark; } } /* ---------- Baza ---------- */ body { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; color: var(--atrament); background: var(--tlo); transition: background-color .35s ease, color .35s ease; } ::selection { background: var(--akcent); color: var(--akcent-kontrast); } a { color: var(--akcent-mocny); text-underline-offset: 3px; } a:hover { color: var(--akcent); } h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.022em; font-weight: 800; text-wrap: balance; } .container { max-width: var(--szerokosc); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); } .container--narrow { max-width: var(--szerokosc-wasko); } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--akcent); color: var(--akcent-kontrast); padding: .6rem 1rem; border-radius: 0 0 var(--promien-maly) 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 2px; } /* ---------- Przyciski ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } .btn:active { transform: scale(.97); } .btn--primary { background: var(--akcent); color: var(--akcent-kontrast); } .btn--primary:hover { background: var(--akcent-mocny); color: var(--akcent-kontrast); } .btn--outline { border-color: var(--linia-mocna); color: var(--atrament); background: transparent; } .btn--outline:hover { border-color: var(--akcent); color: var(--akcent-mocny); } .btn--ghost { background: transparent; color: var(--atrament-2); } .btn--ghost:hover { color: var(--atrament); } .btn--lg { padding: .95rem 2rem; font-size: 1.08rem; } .btn--sm { padding: .45rem 1.05rem; font-size: .92rem; } .btn--block { width: 100%; } /* ---------- Nagłówek strony ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--naglowek-tlo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linia); } .site-header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: 68px; } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--atrament); } .brand img { height: 34px; width: auto; } /* Logo w ciemnym motywie: osobny plik z jasną postacią i literami E, E, G. Filtr brightness() tego nie załatwia, bo mnoży kanały, a prawie czarnego piksela mnożeniem się nie rozjaśni. Wariant ma te same wymiary (565x119), więc podmiana nie przesuwa układu. */ [data-theme="ciemny"] .brand img, [data-theme="ciemny"] .site-footer img { content: url("../img/logo-edomeg-ciemny.webp"); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand img, :root:not([data-theme]) .site-footer img { content: url("../img/logo-edomeg-ciemny.webp"); } } .site-nav { margin-left: auto; } .site-nav__list { display: flex; align-items: center; gap: 1.35rem; } .site-nav__list a:not(.btn) { color: var(--atrament-2); text-decoration: none; font-weight: 500; font-size: .98rem; } .site-nav__list a:not(.btn):hover { color: var(--akcent-mocny); } .site-nav__toggle { display: none; } /* Rozwijane podmenu "Pomoc" (instrukcja, FAQ, poradnik) */ .nav-drop { position: relative; } .nav-drop > button { background: none; border: 0; color: var(--atrament-2); font-weight: 500; font-size: .98rem; display: inline-flex; align-items: center; gap: .3rem; padding: 0; } .nav-drop > button::after { content: ""; width: .5em; height: .5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); } .nav-drop__menu { position: absolute; top: calc(100% + .9rem); left: 50%; transform: translateX(-50%); min-width: 230px; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien-maly); box-shadow: var(--cien); padding: .5rem; display: none; } .nav-drop.is-open .nav-drop__menu { display: block; } .nav-drop__menu a { display: block; padding: .55rem .8rem; border-radius: 7px; text-decoration: none; color: var(--atrament-2); font-size: .95rem; } .nav-drop__menu a:hover { background: var(--akcent-tlo); color: var(--akcent-mocny); } /* ---------- Przełącznik motywu (auto / jasny / ciemny) ---------- */ .theme-switch { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--linia); border-radius: 999px; padding: 3px; background: var(--powierzchnia); } .theme-switch__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--wyciszony); transition: background-color .18s ease, color .18s ease; } .theme-switch__btn:hover { color: var(--atrament); } .theme-switch__btn[aria-pressed="true"] { background: var(--akcent-tlo); color: var(--akcent-mocny); } .theme-switch__btn svg { width: 17px; height: 17px; } /* ---------- Hero ---------- */ .hero { padding: clamp(3.2rem, 9vw, 7rem) 0 clamp(2.2rem, 5vw, 4rem); overflow: hidden; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 600; color: var(--akcent-mocny); background: var(--akcent-tlo); border-radius: 999px; padding: .38rem 1rem; margin-bottom: 1.6rem; } .hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); } .hero__title { font-size: clamp(2.6rem, 7.2vw, 5.4rem); max-width: 15ch; } .hero__title .hl { color: var(--akcent); } .hero__title .dim { color: var(--wyciszony); } .hero__lead { margin-top: 1.5rem; max-width: 46ch; font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: var(--atrament-2); } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; } .hero__note { margin-top: 1rem; font-size: .9rem; color: var(--wyciszony); } /* Hero z grafiką: dwie kolumny, tekst + zdjęcie produktowe */ .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .hero__media { position: relative; } .hero__media img { width: 100%; height: auto; border-radius: var(--promien); border: 1px solid rgba(23, 29, 26, .24); box-shadow: var(--cien); } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; max-width: 340px; margin-inline: auto; } } /* W ciemnym motywie jasne zdjęcie bije po oczach (kontrast do tła ~8,9:1 zamiast 1,9:1 jak w jasnym). Tu wystarczy filtr: przyciemnianie to mnożenie, a jasne piksele mnożą się poprawnie (inaczej niż przy rozjaśnianiu czerni w logo). */ [data-theme="ciemny"] .hero__media img, [data-theme="ciemny"] .proof-shot { filter: brightness(.85) saturate(.95); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .hero__media img, :root:not([data-theme]) .proof-shot { filter: brightness(.85) saturate(.95); } } /* Ikony w kartach (benefit-*, feat-*, icon-*): linia w kolorze akcentu na przezroczystym tle; plakietkę dokłada CSS przez --akcent-tlo, więc działa automatycznie w obu motywach bez osobnych plików na tryb ciemny. */ .card__icon { width: 48px; height: 48px; margin-bottom: 1rem; border-radius: 10px; background: var(--ikona-tlo); padding: 6px; box-sizing: border-box; } /* ---------- Pasek przewijany (marquee) ---------- */ .marquee { border-block: 1px solid var(--linia); overflow: hidden; white-space: nowrap; padding: .8rem 0; font-family: var(--font-mono); font-size: .88rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wyciszony); } .marquee__track { display: inline-block; animation: marquee-jazda 36s linear infinite; } .marquee__track span { margin: 0 1.4rem; } @keyframes marquee-jazda { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Sekcje ---------- */ .section { padding: clamp(3rem, 7.5vw, 5.5rem) 0; } .section--alt { background: var(--tlo-alt); } .section__kicker { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--akcent-mocny); margin-bottom: .9rem; } .section__title { font-size: clamp(1.7rem, 3.6vw, 2.7rem); max-width: 24ch; } .section__intro { margin-top: 1rem; max-width: 60ch; color: var(--atrament-2); font-size: 1.08rem; } .section__note { margin-top: 1.6rem; font-size: .95rem; color: var(--wyciszony); max-width: 70ch; } /* Box dla obecnych klientów (przedłużenia / ulepszenia / kopia w chmurze) */ .renewal-box { margin: 2rem auto 0; max-width: 720px; text-align: center; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); padding: 1.6rem 1.8rem; box-shadow: var(--cien); transition: border-color .18s ease, box-shadow .18s ease; } .renewal-box:hover { border-color: var(--akcent); box-shadow: 0 20px 45px rgba(13, 122, 85, .16); } .renewal-box p { margin: 0 0 1.1rem; color: var(--atrament-2); } .renewal-box a.btn { margin: 0 auto; } /* ---------- Liczby (pasek zaufania) ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linia); border-block: 1px solid var(--linia); } .stats__item { background: var(--tlo); padding: 1.7rem 1.2rem; text-align: center; } .stats__num { display: block; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--akcent-mocny); } .stats__lbl { display: block; margin-top: .3rem; font-size: .9rem; color: var(--wyciszony); } /* ---------- Siatka bento ---------- */ .bento { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); margin-top: 2.4rem; } .bento__cell { grid-column: span 4; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); padding: 1.6rem; display: flex; flex-direction: column; gap: .55rem; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .bento__cell:hover { transform: translateY(-4px); border-color: var(--akcent); box-shadow: var(--cien); } .bento__cell--w6 { grid-column: span 6; } .bento__cell--w8 { grid-column: span 8; } .bento__cell--accent { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-kontrast); } .bento__cell--accent h3 { color: inherit; } .bento__cell h3 { font-size: 1.16rem; } .bento__cell p { color: var(--atrament-2); font-size: .97rem; } .bento__cell--accent p { color: inherit; } .bento__cell img { width: 48px; height: 48px; border-radius: 10px; background: var(--ikona-tlo); padding: 6px; box-sizing: border-box; } .bento__cell--accent img { background: var(--akcent-kontrast); } .bento__more { margin-top: auto; padding-top: .5rem; font-weight: 600; font-size: .94rem; text-decoration: none; } .section--alt .bento__cell { background: var(--powierzchnia-2); } .section--alt .bento__cell--accent { background: var(--akcent); border-color: var(--akcent); } /* ---------- Karty ---------- */ .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.4rem; } .card { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); padding: 1.6rem; transition: transform .25s ease, border-color .25s ease; } .card:hover { transform: translateY(-4px); border-color: var(--akcent); } .card__title { font-size: 1.14rem; margin-bottom: .45rem; } .card p { color: var(--atrament-2); font-size: .97rem; } /* Podział numeru telefonu na dział handlowy / pomoc techniczna (karta Telefon) */ .tel-split { display: grid; gap: .7rem; margin-top: 1rem; } .tel-split__item { background: var(--tlo-alt); border-radius: var(--promien-maly); padding: .75rem .9rem; } .tel-split__dzial { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--akcent-mocny); margin-bottom: .3rem; } .tel-split__num { display: block; font-size: 1.05rem; } .tel-split__godz { display: block; font-size: .84rem; color: var(--wyciszony); margin-top: .2rem; } .card__more { display: inline-block; margin-top: .8rem; font-weight: 600; font-size: .94rem; text-decoration: none; } .section--alt .card { background: var(--powierzchnia-2); } /* ---------- Porównanie dwóch kolumn ---------- */ .duel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.4rem; } .duel__col { border-radius: var(--promien); padding: 1.9rem; border: 1px solid var(--linia); background: var(--powierzchnia); } .duel__col--tm { border-color: var(--akcent); border-width: 2px; } .duel__head { font-size: 1.25rem; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .6rem; } .duel__head svg { width: 26px; height: 26px; color: var(--akcent); flex: none; } .duel__list li { display: flex; gap: .7rem; padding: .62rem 0; border-top: 1px solid var(--linia); font-size: .99rem; } .duel__list li::before { flex: none; font-weight: 800; } .duel__col--tm .duel__list li::before { content: "✓"; color: var(--ok); } .duel__col--saas .duel__list li::before { content: "✕"; color: var(--blad); } .duel__col--saas .duel__head svg { color: var(--wyciszony); } .section--alt .duel__col { background: var(--powierzchnia-2); } /* ---------- Cennik ---------- */ .pricing { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 2.4rem; align-items: stretch; } .plan { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); padding: 1.8rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; position: relative; } .plan--featured { border: 2px solid var(--akcent); } .plan__tag { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: var(--akcent); color: var(--akcent-kontrast); font-size: .8rem; font-weight: 700; padding: .22rem .9rem; border-radius: 999px; white-space: nowrap; } .plan__name { font-size: 1.2rem; } .plan__price { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; } .plan__price span { display: block; font-size: .85rem; font-weight: 500; color: var(--wyciszony); letter-spacing: 0; } .plan__for { font-size: .93rem; color: var(--wyciszony); } .plan__feats { display: grid; gap: .35rem; margin-block: .4rem .9rem; } .plan__feats li { font-size: .95rem; color: var(--atrament-2); padding-left: 1.3rem; position: relative; } .plan__feats li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; } .plan .btn { margin-top: auto; } .section--alt .plan { background: var(--powierzchnia-2); } /* ---------- FAQ (details) ---------- */ .faq { margin-top: 2.2rem; border-top: 1px solid var(--linia); } .faq__item { border-bottom: 1px solid var(--linia); } .faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem .2rem; font-weight: 600; font-size: 1.05rem; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linia-mocna); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; color: var(--wyciszony); transition: transform .25s ease, background-color .2s ease, color .2s ease; } .faq__item[open] summary::after { transform: rotate(45deg); background: var(--akcent); border-color: var(--akcent); color: var(--akcent-kontrast); } .faq__a { padding: 0 .2rem 1.2rem; color: var(--atrament-2); max-width: 70ch; } .faq__a p + p { margin-top: .7rem; } /* ---------- Zrzut ekranu programu ---------- */ .proof-shot { margin-top: 2.2rem; border-radius: var(--promien); border: 1px solid rgba(23, 29, 26, .24); box-shadow: var(--cien); } .trust-list { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; font-size: .95rem; color: var(--atrament-2); } /* ---------- Formularz ---------- */ .lead-form { margin-top: 2rem; display: grid; gap: 1.05rem; } .lead-form__cols { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; } .lead-form__row { display: grid; gap: .35rem; } .lead-form__row label { font-weight: 600; font-size: .95rem; } .lead-form__row .opt { color: var(--wyciszony); font-weight: 400; } .lead-form__row .req { color: var(--blad); } .lead-form input[type="text"], .lead-form input[type="email"], .lead-form input[type="tel"], .lead-form select, .lead-form textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--linia-mocna); border-radius: var(--promien-maly); background: var(--powierzchnia); color: var(--atrament); } .lead-form textarea { resize: vertical; min-height: 90px; } .lead-form [aria-invalid="true"] { border-color: var(--blad); } .lead-form__row--check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; } .lead-form__row--check label { font-weight: 400; font-size: .92rem; color: var(--atrament-2); } .lead-form__row--check input { margin-top: .3rem; accent-color: var(--akcent); } .field-err { color: var(--blad); font-size: .87rem; min-height: 1em; } .field-hint { color: var(--wyciszony); font-size: .87rem; } .lead-form__status { font-weight: 600; min-height: 1.4em; } .lead-form__status.is-ok { color: var(--ok); } .lead-form__status.is-err { color: var(--blad); } .lead-form__priv { font-size: .85rem; color: var(--wyciszony); } .hp-field { position: absolute; left: -9999px; } /* ---------- Okruszki (breadcrumbs) ---------- */ .breadcrumbs { font-size: .88rem; color: var(--wyciszony); padding-top: 1.4rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; } .breadcrumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--linia-mocna); } .breadcrumbs a { color: var(--wyciszony); text-decoration: none; } .breadcrumbs a:hover { color: var(--akcent-mocny); } /* ---------- Treść artykułu (poradnik, instrukcja, strony prawne) ---------- */ .prose { max-width: 72ch; } .prose h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 1.4rem; } .prose h2 { font-size: 1.55rem; margin: 2.6rem 0 .9rem; } .prose h3 { font-size: 1.2rem; margin: 1.9rem 0 .6rem; } .prose p { margin-bottom: 1rem; color: var(--atrament-2); } .prose ul, .prose ol { margin: 0 0 1.1rem 1.3rem; color: var(--atrament-2); } .prose li { margin-bottom: .4rem; } .prose li::marker { color: var(--akcent); } .prose strong { color: var(--atrament); } .prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; } .prose th, .prose td { border: 1px solid var(--linia); padding: .55rem .75rem; text-align: left; } .prose th { background: var(--tlo-alt); font-weight: 700; } .prose code { font-family: var(--font-mono); font-size: .88em; background: var(--tlo-alt); border: 1px solid var(--linia); border-radius: 5px; padding: .08em .35em; } .prose kbd { font-family: var(--font-mono); font-size: .85em; border: 1px solid var(--linia-mocna); border-bottom-width: 2px; border-radius: 5px; padding: .08em .45em; background: var(--powierzchnia); } .prose blockquote { border-left: 3px solid var(--akcent); padding: .2rem 0 .2rem 1.1rem; margin: 1.2rem 0; color: var(--wyciszony); } /* Ramka "wskazówka" i "uwaga" w instrukcji */ .tip, .warn { border: 1px solid var(--linia); border-left: 4px solid var(--akcent); border-radius: 0 var(--promien-maly) var(--promien-maly) 0; background: var(--powierzchnia); padding: .9rem 1.1rem; margin: 1.2rem 0; font-size: .96rem; } .warn { border-left-color: var(--blad); } .tip p, .warn p { margin: 0; } /* ---------- Spis treści instrukcji / lista FAQ ---------- */ .toc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 2.2rem; counter-reset: czesc; } .toc-card { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); padding: 1.4rem 1.5rem; text-decoration: none; display: block; color: inherit; transition: transform .25s ease, border-color .25s ease; } .toc-card:hover { transform: translateY(-3px); border-color: var(--akcent); color: inherit; } .toc-card__num { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; color: var(--akcent-mocny); text-transform: uppercase; } .toc-card h3 { font-size: 1.12rem; margin: .35rem 0 .4rem; } .toc-card p { font-size: .92rem; color: var(--wyciszony); } /* Nawigacja między częściami instrukcji */ .pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; border-top: 1px solid var(--linia); padding-top: 1.4rem; } .pager a { text-decoration: none; font-weight: 600; font-size: .96rem; max-width: 45%; } .pager__next { margin-left: auto; text-align: right; } .pager small { display: block; font-weight: 400; color: var(--wyciszony); font-size: .82rem; } /* Spis rozdziałów w obrębie części */ .mini-toc { border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); padding: 1.2rem 1.5rem; margin: 1.8rem 0 2.4rem; font-size: .95rem; } .mini-toc strong { display: block; margin-bottom: .5rem; } .mini-toc ol { margin: 0 0 0 1.2rem; color: var(--atrament-2); } .mini-toc a { text-decoration: none; } /* ---------- Strony prawne ---------- */ .legal { } .legal h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: .8rem; } .legal h2 { font-size: 1.35rem; margin: 2.2rem 0 .8rem; } .legal h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; } .legal p, .legal li { color: var(--atrament-2); } .legal p { margin-bottom: .9rem; } .legal ul, .legal ol { margin: 0 0 1rem 1.3rem; } .legal li { margin-bottom: .35rem; } .legal__upd { font-size: .9rem; color: var(--wyciszony); margin-bottom: 1.6rem; } .legal__toc { border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); padding: 1.2rem 1.5rem; margin-bottom: 2rem; font-size: .95rem; } .legal__toc strong { display: block; margin-bottom: .5rem; } .legal__toc ol { margin: 0 0 0 1.2rem; } .legal__toc a { text-decoration: none; } .legal table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .93rem; } .legal th, .legal td { border: 1px solid var(--linia); padding: .5rem .7rem; text-align: left; vertical-align: top; } .legal th { background: var(--tlo-alt); } .legal__note { background: var(--akcent-tlo); border-left: 4px solid var(--akcent); border-radius: 0 var(--promien-maly) var(--promien-maly) 0; padding: .9rem 1.1rem; margin-bottom: 1.6rem; } .legal__note p { margin: 0; } .muted { color: var(--wyciszony); font-size: .92rem; } .eyebrow { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--akcent-mocny); margin-bottom: .9rem; } /* ---------- CTA końcowe ---------- */ .cta-box { margin-top: 3rem; border-radius: var(--promien); background: var(--akcent); color: var(--akcent-kontrast); padding: clamp(1.8rem, 4vw, 3rem); text-align: center; } .cta-box h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: inherit; } .cta-box p { margin: .7rem auto 1.4rem; max-width: 52ch; opacity: .92; } .cta-box .btn--primary { background: var(--akcent-kontrast); color: var(--akcent-mocny); } .cta-box .btn--outline { border-color: currentColor; color: inherit; } /* ---------- Stopka ---------- */ .site-footer { border-top: 1px solid var(--linia); background: var(--tlo-alt); margin-top: 4rem; } .site-footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; padding-block: 3rem; } .site-footer__desc { margin-top: .9rem; font-size: .93rem; color: var(--wyciszony); max-width: 30ch; } .site-footer__h { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--wyciszony); margin-bottom: .9rem; font-weight: 700; } .site-footer ul { display: grid; gap: .45rem; } .site-footer ul a { color: var(--atrament-2); text-decoration: none; font-size: .95rem; } .site-footer ul a:hover { color: var(--akcent-mocny); } .site-footer address { font-style: normal; font-size: .95rem; color: var(--atrament-2); line-height: 1.8; } .site-footer__bottom { border-top: 1px solid var(--linia); padding-block: 1.1rem; font-size: .85rem; color: var(--wyciszony); display: flex; flex-wrap: wrap; gap: .5rem 2rem; } /* ---------- Baner cookies ---------- */ .cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 150; background: var(--powierzchnia); border-top: 1px solid var(--linia); box-shadow: 0 -8px 30px rgba(0, 0, 0, .12); padding: 1.1rem 0; } .cookie-banner__inner { max-width: var(--szerokosc); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .cookie-banner__title { font-size: 1.02rem; margin-bottom: .2rem; } .cookie-banner__desc { font-size: .88rem; color: var(--atrament-2); max-width: 62ch; } .cookie-banner__actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* ---------- Animacje wejścia (scroll reveal) ---------- Ukrywamy elementy tylko wtedy, gdy działa JS (klasa .js na ustawiana w theme-init.js). Bez JS treść jest widoczna od razu. */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal--d1 { transition-delay: .08s; } .js .reveal--d2 { transition-delay: .16s; } .js .reveal--d3 { transition-delay: .24s; } /* ---------- Ograniczony ruch ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .marquee__track { animation: none; } .js .reveal { opacity: 1; transform: none; } } /* ---------- Responsywność ---------- */ @media (max-width: 980px) { .bento__cell, .bento__cell--w6, .bento__cell--w8 { grid-column: span 6; } .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: none; border: 1px solid var(--linia); border-radius: var(--promien-maly); margin-left: auto; } .site-nav { margin-left: auto; } .site-nav__bars, .site-nav__bars::before, .site-nav__bars::after { content: ""; display: block; width: 18px; height: 2px; background: var(--atrament); position: relative; } .site-nav__bars::before { position: absolute; top: -6px; } .site-nav__bars::after { position: absolute; top: 6px; } .site-nav__list { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--powierzchnia); border-bottom: 1px solid var(--linia); flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 1.2rem 1.2rem; } .site-nav__list.is-open { display: flex; } .site-nav__list li { border-top: 1px solid var(--linia); } .site-nav__list li:first-child { border-top: 0; } .site-nav__list a:not(.btn) { display: block; padding: .8rem 0; } .site-nav__list .btn { margin-top: .8rem; } .nav-drop__menu { position: static; transform: none; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; display: block; background: transparent; } .nav-drop > button { display: none; } .duel { grid-template-columns: 1fr; } .lead-form__cols { grid-template-columns: 1fr; } .bento__cell, .bento__cell--w6, .bento__cell--w8 { grid-column: span 12; } .site-footer__grid { grid-template-columns: 1fr; gap: 1.6rem; } .pager a { max-width: 48%; } } /* ---------- Klasy narzędziowe (zamiast stylów inline — CSP style-src 'self' bez unsafe-inline) ---------- */ .h1-cat { font-size: clamp(1.9rem, 4vw, 2.9rem); } .h1-hub { font-size: clamp(2.2rem, 5.4vw, 4rem); } .hero--tight { padding-bottom: 1rem; } .section--tight { padding-top: 1rem; } .hero__cta--center { justify-content: center; } .h2-related { margin-top: 3rem; font-size: 1.25rem; } .related-list { margin-top: .8rem; }