/* * Finaxio - serwis o kredytach bankowych dla firm. Marka: brandbook Finaxio Wariant A (docs/marka/finaxio); wygląd i UX: Bankix_Wytyczne_Brand_UX_UI_Development_v1.pdf. * Paleta Finaxio: navy #0B2E6B (nawigacja, przyciski, ciemne sekcje), tekst #122744, blue X #2F6FC3 (linki, akcenty), light blue #E6F0FA, * off white #F7F9FC (panele), obramowania #D4DEE8. Bez limonki i intensywnych gradientów; logo kolorowe tylko na jasnym tle. * Proporcja: ok. 70% bieli, 20% jasnych szarości, 10% granatu/niebieskiego. Krój Inter (400/500/600/700), hostowany lokalnie (OFL). * Kalkulatory, raport, słownik i formularze: narzedzia.css (ładowany tylko tam, gdzie są - Komponenty::styl). */ @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* tokeny marki Finaxio (brandbook Wariant A, rozdz. 02) - paleta interfejsu, nie do przemalowywania logo */ --granat: #0B2E6B; /* Institutional navy: nagłówki sekcji ciemnych, nawigacja, przyciski, stopka (12,5:1 z bielą) */ --tekst: #122744; /* Text dark: tekst główny i nagłówki (15:1) */ --tekst-slaby: #566579; /* tekst pomocniczy (6,0:1 z bielą, 5,6:1 z #F7F9FC) */ --linia: #D4DEE8; /* obramowania kart i pól (border 1 px) */ --tlo-sekcji: #F7F9FC; /* Off white: sekcje i panele w tle */ --akcent: #2F6FC3; /* Blue X: linki, fokus, akcenty (5,0:1 z bielą) */ --akcent-hover: #0B2E6B; --akcent-tlo: #E6F0FA; /* Light blue: jasne tło w kolorze akcentu */ --cta: #2F6FC3; /* przycisk główny: Blue X z białym tekstem (5,0:1) - jak na makiecie strony głównej */ --cta-hover: #0B2E6B; --cta-tekst: #FFFFFF; --zielen-akcent: #2F6FC3; /* akcenty graficzne (nazwa tokenu z kodu Nalevio) */ --blad: #B91C1C; --blad-tlo: #FEF2F2; --blad-tekst: #991B1B; --akcent-tekst: #2F6FC3; --na-ciemnym: #E6F0FA; /* akcent graficzny na granacie (Light blue) */ --ostrzezenie: #B45309; --ostrzezenie-na-ciemnym: #FCD34D; --ostrzezenie-tlo: #FFFBEB; --zaznaczenie: #FDE68A; --obramowanie-pola: #7A8699; /* pola i kafle - kontrast min. 3:1 z bielą (WCAG 1.4.11) */ --promien-karty: 10px; /* karty 8-12 px */ --promien: 8px; /* przyciski i pola 6-8 px */ --font-naglowki: "Inter Variable", system-ui, "Segoe UI", Arial, sans-serif; --font-tresc: "Inter Variable", system-ui, "Segoe UI", Arial, sans-serif; --margines: clamp(16px, 4vw, 48px); --wys-naglowka: 80px; --wys-narzedzia: 36px; /* pasek narzędziowy nad nawigacją (desktop) */ /* jedna siatka sekcji "tytuł | treść" (5 + 7 z 12 kolumn), jak w PD */ --uklad-kolumny: minmax(0, 5fr) minmax(0, 7fr); --uklad-odstep: clamp(40px, 6vw, 96px); --szer: 1280px; /* kontener 1200-1280 px */ } /* ---------- podstawy ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--wys-naglowka) + 16px); } body { margin: 0; overflow-x: clip; font: 16px/1.5 var(--font-tresc); color: var(--tekst); background: #fff; } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-naglowki); font-weight: 700; letter-spacing: -0.02em; color: var(--granat); } h1 { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 3rem); line-height: 1.12; margin: 0; } h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2.125rem); line-height: 1.2; } h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem); line-height: 1.3; font-weight: 600; margin: 2em 0 0.5em; } p { margin: 0 0 1em; } a { color: var(--granat); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--akcent) 55%, transparent); } a:hover { color: var(--akcent); } :focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; } strong { color: var(--granat); font-weight: 600; } .kontener { max-width: var(--szer); margin: 0 auto; padding: 0 var(--margines); } .pomin { position: absolute; left: -9999px; } .pomin:focus { left: 16px; top: 16px; z-index: 2000; background: #fff; padding: 8px 12px; } /* ---------- przyciski ---------- */ .przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; min-height: 44px; border-radius: var(--promien); border: 0; background: var(--cta); color: var(--cta-tekst); font: 600 16px/1.2 var(--font-naglowki); text-decoration: none; cursor: pointer; transition: background-color .2s ease; } .przycisk:hover, .przycisk:focus-visible { background: var(--cta-hover); color: var(--cta-tekst); } .przycisk--maly { padding: 11px 20px; font-size: 15px; } .przycisk--pelny { width: 100%; } .przycisk--jasny { background: #fff; color: var(--granat); } .przycisk--jasny:hover, .przycisk--jasny:focus-visible { background: var(--akcent-tlo); color: var(--granat); } .przycisk--przyklejony { display: none; } .przycisk--zastepczy { visibility: hidden; pointer-events: none; } @media (max-width: 1199.98px) { .przycisk--zastepczy { display: none; } } .link-podkreslony { color: var(--granat); font: 500 16px/1.2 var(--font-naglowki); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: 6px; } .link-podkreslony:hover { color: var(--akcent); } .strzalka { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; transition: background-color .2s, color .2s, border-color .2s; } /* ---------- logo ---------- */ .logo { display: inline-flex; align-items: center; } .logo__obraz { display: block; width: auto; height: 36px; } /* na ciemnym tle (stopka) - kolorowy logotyp na białej plakietce z polem ochronnym (brandbook: wersja kolorowa tylko na jasnym tle) */ .logo--plakietka { padding: 12px 16px; border-radius: var(--promien); background: #fff; } .logo--plakietka .logo__obraz { height: 30px; } /* ---------- nagłówek i mega-menu ---------- */ .naglowek { position: sticky; top: calc(-1 * var(--wys-narzedzia)); z-index: 1000; background: #fff; border-bottom: 1px solid var(--linia); font-family: var(--font-naglowki); } /* pasek narzędziowy: niski, formalny; przy przewijaniu wyjeżdża poza ekran, przyklejona zostaje nawigacja główna */ .naglowek__narzedzia { height: var(--wys-narzedzia); border-bottom: 1px solid var(--linia); background: var(--tlo-sekcji); } .naglowek__narzedzia-wnetrze { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; max-width: var(--szer); margin: 0 auto; padding: 0 var(--margines); font-size: 13px; } .naglowek__opis { margin: 0; color: var(--tekst-slaby); } .naglowek__narzedzia ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; } .naglowek__narzedzia a { color: var(--tekst-slaby); text-decoration: none; } .naglowek__narzedzia a:hover, .naglowek__narzedzia a[aria-current] { color: var(--granat); text-decoration: underline; } .naglowek__pasek { display: flex; align-items: center; gap: 32px; max-width: var(--szer); min-height: var(--wys-naglowka); margin: 0 auto; padding: 0 var(--margines); } .naglowek__logo { flex: none; text-decoration: none; } .naglowek__burger { display: none; } .nawigacja { display: flex; align-items: center; gap: 28px; margin-left: auto; } .nawigacja__lista { display: flex; gap: 0 26px; margin: 0; padding: 0; list-style: none; } .nawigacja__przelacznik, .nawigacja__link, .nawigacja__pomocniczy, .nawigacja__jezyk, .nawigacja__boczne .przycisk { white-space: nowrap; } .nawigacja__jezyk { color: var(--tekst-slaby); font: 500 14px/1 var(--font-naglowki); letter-spacing: .04em; text-decoration: none; } .nawigacja__jezyk:hover { color: var(--granat); } .nawigacja__przelacznik, .nawigacja__link { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; border: 0; background: none; color: var(--granat); font: 400 15px/1.2 var(--font-naglowki); text-decoration: none; cursor: pointer; background-image: linear-gradient(var(--akcent), var(--akcent)); background-repeat: no-repeat; background-position: 0 calc(100% - 4px); background-size: 0 2px; transition: background-size .3s ease; } .nawigacja__przelacznik:hover, .nawigacja__link:hover, .nawigacja__przelacznik[aria-expanded="true"], .jest-biezaca > .nawigacja__przelacznik, .jest-biezaca > .nawigacja__link { color: var(--granat); background-size: 100% 2px; } .panel-otwarty .jest-biezaca > .nawigacja__przelacznik[aria-expanded="false"]:not(:hover) { background-size: 0 2px; } .nawigacja__przelacznik svg { transition: transform .2s ease; } .nawigacja__przelacznik[aria-expanded="true"] svg { transform: rotate(180deg); } .nawigacja__boczne { display: flex; align-items: center; gap: 20px; padding-left: 28px; border-left: 1px solid var(--linia); } .nawigacja__pomocniczy { color: var(--tekst-slaby); font-size: 15px; text-decoration: none; } .nawigacja__pomocniczy:hover, .nawigacja__pomocniczy[aria-current] { color: var(--granat); } .panel__tytul { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; color: var(--granat); font: 600 26px/1.2 var(--font-naglowki); letter-spacing: -0.02em; text-decoration: none; } .panel__przedrostek { display: none; } .panel__tytul:hover .strzalka, .panel__kafel:hover .strzalka { background: var(--akcent); border-color: var(--akcent); color: #fff; } .panel__grupy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .panel__grupy--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel__grupy--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .panel__naglowek { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linia); color: var(--tekst-slaby); font: 600 13px/1.3 var(--font-naglowki); letter-spacing: .1em; text-transform: uppercase; } .panel__linki { margin: 0; padding: 0; list-style: none; } .panel__linki li + li { margin-top: 8px; } .panel__linki a { color: var(--granat); font: 400 16px/1.35 var(--font-tresc); text-decoration: none; } .panel__linki a:hover, .panel__linki a[aria-current] { color: var(--akcent-tekst); text-decoration: underline; text-decoration-color: var(--akcent); } .panel__kafel { display: flex; flex-direction: column; align-self: start; gap: 10px; padding: 28px; border-radius: 12px; background: var(--akcent-tlo); color: var(--granat); text-decoration: none; } .panel__kafel:hover { color: var(--granat); } .panel__kafel-tytul { font: 600 20px/1.25 var(--font-naglowki); letter-spacing: -0.01em; } .panel__kafel-tekst { color: var(--tekst); font: 400 16px/1.45 var(--font-tresc); } .panel__kafel-cta { display: inline-flex; align-items: center; gap: 12px; padding-top: 14px; color: var(--akcent); font: 500 15px/1.2 var(--font-naglowki); } @media (min-width: 1200px) { .panel { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--wys-naglowka)); overflow-y: auto; background: #fff; border-top: 1px solid var(--linia); box-shadow: 0 30px 50px rgba(11, 37, 69, .08); } .panel__wnetrze { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; max-width: var(--szer); margin: 0 auto; padding: 40px var(--margines) 48px; } .panel-otwarty body::after { content: ""; position: fixed; inset: 0; z-index: 900; background: rgba(11, 37, 69, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } } @media (max-width: 1199.98px) { :root { --wys-naglowka: 64px; --wys-narzedzia: 0px; } .naglowek__narzedzia { display: none; } .logo__obraz { height: 30px; } .naglowek__burger { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 0; border: 0; background: none; color: var(--granat); font: 400 15px/1 var(--font-naglowki); cursor: pointer; } .naglowek__burger-linie, .naglowek__burger-linie::before, .naglowek__burger-linie::after { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s; } .naglowek__burger-linie { position: relative; } .naglowek__burger-linie::before, .naglowek__burger-linie::after { content: ""; position: absolute; left: 0; } .naglowek__burger-linie::before { top: -7px; } .naglowek__burger-linie::after { top: 7px; } .naglowek__burger[aria-expanded="true"] .naglowek__burger-linie { background: transparent; } .naglowek__burger[aria-expanded="true"] .naglowek__burger-linie::before { transform: translateY(7px) rotate(45deg); } .naglowek__burger[aria-expanded="true"] .naglowek__burger-linie::after { transform: translateY(-7px) rotate(-45deg); } .nawigacja { display: none; position: fixed; top: var(--wys-naglowka); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--margines) 40px; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-top: 1px solid var(--linia); } .menu-otwarte .nawigacja { display: flex; } .menu-otwarte body { overflow: hidden; } .nawigacja__lista { flex-direction: column; } .nawigacja__lista > li { border-bottom: 1px solid var(--linia); } .nawigacja__przelacznik, .nawigacja__link { justify-content: space-between; width: 100%; padding: 18px 0; font-size: 19px; background-image: none; } .jest-biezaca > .nawigacja__przelacznik span, .jest-biezaca > .nawigacja__link { color: var(--akcent); } .panel__wnetrze { padding: 0 0 24px; } .panel__przedrostek { display: inline; } .panel__tytul { margin-bottom: 20px; font-size: 18px; } .panel__grupy, .panel__grupy--2, .panel__grupy--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; } .panel__linki li + li { margin-top: 0; } .panel__linki a { display: block; padding: 10px 0; } .panel__kafel { margin-top: 24px; padding: 22px; } .nawigacja__boczne { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; padding-left: 0; border-left: 0; } .nawigacja__pomocniczy { font-size: 17px; } } /* ---------- nagłówek podstrony ---------- */ .naglowek-strony { position: relative; overflow: hidden; background: var(--akcent-tlo); } /* bez zdjęcia: szerszy tytuł i lead, w tle delikatna siatka kropek wygaszana ku lewej (faktura, nie "brakujący obrazek") */ .naglowek-strony:not(.naglowek-strony--zdjecie)::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 55%; background-image: radial-gradient(circle, rgba(15, 118, 110, .16) 1.2px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; } .naglowek-strony:not(.naglowek-strony--zdjecie) h1 { max-width: 28ch; } .naglowek-strony:not(.naglowek-strony--zdjecie) .naglowek-strony__lead { max-width: 72ch; } .naglowek-strony__uklad { position: relative; z-index: 1; } .naglowek-strony__uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(36px, 5vw, 64px); } .naglowek-strony--zdjecie .naglowek-strony__uklad { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .naglowek-strony h1 { max-width: 22ch; } .naglowek-strony__lead { max-width: 60ch; margin: 24px 0 0; color: var(--tekst); font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.6; } .naglowek-strony__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 32px 0 0; } .naglowek-strony__zdjecie { margin: 0; } .naglowek-strony__zdjecie img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; } .okruszki ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 20px; padding: 0; list-style: none; color: var(--tekst-slaby); font-size: 15px; } .okruszki li + li::before { content: "/"; margin-right: 8px; color: var(--tekst-slaby); } .okruszki a { color: var(--granat); text-decoration-color: rgba(11, 37, 69, .25); } .okruszki a:hover { text-decoration-color: var(--akcent); } .metryka { margin: 20px 0 0; color: var(--tekst-slaby); font: 500 14px/1.4 var(--font-naglowki); } /* flex z zawijaniem: punkt dłuższy niż pół kolumny dostaje własny wiersz i nie wychodzi pod kartę ani zdjęcie (audyt 3, G-N3-1) */ .zaufanie { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--tekst); font-size: 15px; } .zaufanie li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; max-width: 100%; } .zaufanie svg { flex: none; margin-top: 3px; color: var(--akcent-tekst); } .udostepnij { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--tekst-slaby); font-size: 14px; } .udostepnij a, .udostepnij button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--obramowanie-pola); border-radius: 50%; background: #fff; color: var(--granat); cursor: pointer; } .udostepnij a:hover, .udostepnij button:hover { border-color: var(--akcent); color: var(--akcent); } .udostepnij button.skopiowano { border-color: var(--akcent-tekst); color: var(--akcent-tekst); } /* ---------- strona główna ---------- */ .hero { position: relative; overflow: hidden; background: #fff; } /* duże koło w kolorze akcentu - jedyny element dekoracyjny (jak kropka z logo w PD) */ .hero::before { content: ""; position: absolute; top: -18%; right: -10%; width: min(64vw, 860px); aspect-ratio: 1; border-radius: 50%; background: var(--akcent-tlo); } .hero__uklad { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 6vw, 104px); align-items: center; max-width: var(--szer); margin: 0 auto; padding: clamp(40px, 5vw, 80px) var(--margines) clamp(48px, 5vw, 80px); } .hero__tytul { max-width: 20ch; font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); line-height: 1.06; letter-spacing: -0.03em; } .hero__lead { max-width: 54ch; margin: 28px 0 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); } .hero__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 36px 0 0; } .hero__karta { padding: 28px; border: 1px solid var(--linia); border-radius: 20px; background: #fff; box-shadow: 0 30px 60px rgba(11, 37, 69, .1); } .hero__karta-tytul { margin: 0 0 6px; color: var(--granat); font: 600 22px/1.3 var(--font-naglowki); letter-spacing: -0.02em; } .hero__karta-opis { margin: 0 0 20px; color: var(--tekst-slaby); font-size: 16px; line-height: 1.5; } .hero__kafle { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; } .hero__kafle a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--linia); border-radius: 12px; color: var(--granat); font: 500 16px/1.3 var(--font-naglowki); text-decoration: none; transition: border-color .2s, background-color .2s; } .hero__kafle a:hover { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--granat); } .hero__kafle svg { color: var(--akcent); flex: none; } .hero__karta-przypis { margin: 14px 0 0; color: var(--tekst-slaby); font-size: 14px; line-height: 1.45; } .sciezki { position: relative; border-top: 1px solid var(--linia); background: #fff; } .sciezki__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; list-style: none; } .sciezki__lista li + li { border-left: 1px solid var(--linia); } .sciezki__pozycja { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 32px; color: var(--granat); text-decoration: none; transition: background-color .2s; } .sciezki__lista li:first-child .sciezki__pozycja { padding-left: 0; } .sciezki__pozycja:hover { background: var(--tlo-sekcji); color: var(--granat); } .sciezki__tytul { font: 500 18px/1.35 var(--font-naglowki); letter-spacing: -0.01em; } .sciezki__link { color: var(--akcent); font: 500 15px/1.2 var(--font-naglowki); text-decoration: underline; text-underline-offset: 5px; } /* ---------- treść: wstęp i sekcje "tytuł | treść" ---------- */ .wstep { padding: clamp(48px, 6vw, 80px) 0 clamp(16px, 3vw, 32px); } .wstep + .sekcja:not(.sekcja--szara) { padding-top: clamp(24px, 3vw, 40px); } .wstep .kontener > ul, .wstep .kontener > ol { max-width: none; } /* akapity wstępu na pełną szerokość kontenera (decyzja właściciela: tekst bez pustej połowy kolumny) */ .wstep .kontener > p { max-width: none; } .sekcja { padding: clamp(64px, 8vw, 112px) 0; } .sekcja--szara { background: var(--tlo-sekcji); } .sekcja__uklad { display: grid; grid-template-columns: var(--uklad-kolumny); gap: 24px var(--uklad-odstep); align-items: start; } .sekcja__tytul h2 { max-width: 18ch; margin: 0; font-weight: 650; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); line-height: 1.15; letter-spacing: -0.03em; } .sekcja__tresc { max-width: none; padding-top: 6px; } .sekcja__tresc > :last-child, .sekcja__tekst > :last-child { margin-bottom: 0; } .sekcja__tresc > h3:first-child { margin-top: 0; } .sekcja__dalej { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; } .sekcja__dalej > * { min-width: 0; } /* tabela szersza od ekranu przewija się w .tabela, nie rozpycha kolumny (audyt 1, G-1) */ .sekcja__tekst { max-width: none; } .sekcja__naglowek { display: grid; grid-template-columns: var(--uklad-kolumny); gap: 16px var(--uklad-odstep); align-items: end; margin-bottom: 40px; } .sekcja__naglowek h2 { margin: 0; font-weight: 650; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); line-height: 1.15; letter-spacing: -0.03em; } .sekcja__naglowek p { margin: 0; max-width: none; } /* listy z kropką w kolorze akcentu */ .wstep ul:not([class]), .sekcja ul:not([class]), .faq__odpowiedz ul { padding-left: 0; list-style: none; } .wstep ul:not([class]) > li, .sekcja ul:not([class]) > li, .faq__odpowiedz ul > li { position: relative; margin: .55em 0; padding-left: 22px; } .wstep ul:not([class]) > li::before, .sekcja ul:not([class]) > li::before, .faq__odpowiedz ul > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--akcent); } .sekcja ol:not([class]) { padding-left: 1.3em; } .sekcja ol:not([class]) > li { margin: .55em 0; padding-left: 4px; } .sekcja ol:not([class]) > li::marker { color: var(--akcent); font-weight: 600; } /* ---------- ramki (eyebrow z kropką jak w PD) ---------- */ .ramka { margin: 32px 0; padding: 24px 28px; border-left: 3px solid var(--akcent); border-radius: 0 14px 14px 0; background: var(--tlo-sekcji); } .sekcja--szara .ramka { background: #fff; } .ramka > :last-child { margin-bottom: 0; } .ramka__tytul { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); } .ramka__tytul::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); } .ramka--uwaga { border-left-color: var(--ostrzezenie); } .ramka--uwaga .ramka__tytul::before { background: var(--ostrzezenie); } .ramka--wygaslo { max-width: 60ch; margin: 20px 0 0; padding: 14px 20px; font-size: 16px; } /* ramki informacyjne (przykład, wskazówka, podstawa prawna) - jeden kolor akcentu; pomarańcz tylko dla "Uwaga" */ /* krótka odpowiedź: duży tekst na jasnym tle akcentu */ .ramka--krotko { margin: 0 0 clamp(24px, 3vw, 40px); padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 48px); background: var(--tlo-sekcji); } .ramka--krotko:last-child { margin-bottom: 0; } .ramka--krotko .ramka__tytul { color: var(--tekst-slaby); } .ramka--krotko p:not(.ramka__tytul) { max-width: none; color: var(--granat); font: 400 clamp(1.1rem, 1rem + .45vw, 1.35rem)/1.55 var(--font-naglowki); letter-spacing: -0.01em; } .ramka--krotko strong { font-weight: 500; } /* bloki układu: kroki, fakty, karty (lista w ramce bez tytułu) */ .ramka--kroki, .ramka--fakty, .ramka--karty { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } .sekcja--szara .ramka--kroki, .sekcja--szara .ramka--fakty, .sekcja--szara .ramka--karty { background: none; } .sekcja .ramka--kroki ol, .wstep .ramka--kroki ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: krok; } .sekcja .ramka--kroki li, .wstep .ramka--kroki li { counter-increment: krok; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--linia); } .ramka--kroki li::before { content: counter(krok, decimal-leading-zero); display: block; margin-bottom: 16px; color: var(--akcent); font: 400 48px/1 var(--font-naglowki); } .ramka--kroki li strong { display: block; margin-bottom: 8px; font: 600 20px/1.3 var(--font-naglowki); } .sekcja .ramka--fakty ul, .wstep .ramka--fakty ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); } .sekcja .ramka--fakty ul > li, .wstep .ramka--fakty ul > li { margin: 0; padding: 24px 28px 28px 0; color: var(--tekst-slaby); font: 500 14px/1.4 var(--font-naglowki); } .sekcja .ramka--fakty ul > li + li, .wstep .ramka--fakty ul > li + li { padding-left: 28px; border-left: 1px solid var(--linia); } .ramka--fakty li::before { display: none; } .ramka--fakty li strong { display: block; margin-top: 10px; color: var(--granat); font: 400 clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem)/1.15 var(--font-naglowki); letter-spacing: -0.02em; } .ramka--fakty--tekst li strong { font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); line-height: 1.3; letter-spacing: -0.01em; } .sekcja .ramka--karty ul, .wstep .ramka--karty ul, .karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .sekcja .ramka--karty ul > li, .wstep .ramka--karty ul > li { margin: 0; padding: 32px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; } .ramka--karty li::before { display: none; } .ramka--karty li strong:first-child { display: block; margin-bottom: 10px; font: 600 20px/1.3 var(--font-naglowki); letter-spacing: -0.01em; } /* ---------- karty stron ---------- */ .karta { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; color: var(--tekst); text-decoration: none; transition: border-color .2s; } .karta:hover { border-color: var(--akcent); color: var(--tekst); } .karta__etykieta { color: var(--tekst-slaby); font: 500 13px/1.3 var(--font-naglowki); } .karta__tytul { color: var(--granat); font: 600 20px/1.3 var(--font-naglowki); letter-spacing: -0.01em; } .karta__opis { font-size: 16px; line-height: 1.55; } .karta__wiecej { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; color: var(--akcent); font: 500 15px/1.2 var(--font-naglowki); } /* karta z wezwaniem pod krótką odpowiedzią */ .karta-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 20px; padding: 20px 24px 20px 32px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; } .karta-cta p { margin: 0; color: var(--tekst-slaby); font-size: 15px; } .karta-cta .karta-cta__tytul { color: var(--granat); font: 600 17px/1.35 var(--font-naglowki); } .karta-cta .przycisk { flex: none; padding: 13px 24px; } /* ---------- tabele ---------- */ .tabela { overflow-x: auto; border: 1px solid var(--linia); border-radius: 14px; background: #fff; } .tabela table { width: 100%; border-collapse: collapse; font-size: 16px; } .tabela th, .tabela td { padding: 16px 20px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; } .tabela thead th { background: var(--granat); color: #fff; font: 500 15px/1.3 var(--font-naglowki); } .tabela tbody th { width: 34%; color: var(--granat); font: 500 15px/1.4 var(--font-naglowki); } .tabela tr:last-child > * { border-bottom: 0; } .t-right { text-align: right !important; } /* ---------- FAQ i źródła ---------- */ .faq__pozycja { border-bottom: 1px solid var(--linia); } .faq__pozycja:first-child { border-top: 1px solid var(--linia); } .faq summary { position: relative; padding: 22px 48px 22px 0; color: var(--granat); font: 500 18px/1.4 var(--font-naglowki); letter-spacing: -0.01em; list-style: none; cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } .faq__ikona { position: absolute; right: 0; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 1px solid var(--obramowanie-pola); border-radius: 50%; background: #fff; } .faq__ikona::before, .faq__ikona::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--granat); transition: transform .2s; } .faq__ikona::after { transform: rotate(90deg); } .faq details[open] .faq__ikona::after { transform: rotate(0); } .faq__odpowiedz { padding: 0 0 22px; } .faq__odpowiedz > :last-child { margin-bottom: 0; } .zrodla { padding: 0 0 clamp(48px, 6vw, 80px); } .zrodla__ramka { padding: 24px 28px; border: 1px solid var(--linia); border-radius: 14px; background: #fff; font-size: 15px; } .zrodla:not(.sekcja--szara) .zrodla__ramka { background: var(--tlo-sekcji); } .zrodla__tytul { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); } .zrodla__tytul::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); } .zrodla ul { margin: 0; padding-left: 18px; } .zrodla li { margin: 4px 0; } /* ---------- pas CTA i stopka ---------- */ /* pas CTA przed stopką: jasne tło w odcieniu marki (mięta), ciemny tekst, zielony przycisk z granatowym tekstem */ .pas-cta { position: relative; overflow: hidden; background: var(--akcent-tlo); color: var(--tekst); } .pas-cta::before { content: ""; position: absolute; top: -60%; right: -6%; width: min(40vw, 520px); aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .6; pointer-events: none; } .pas-cta__uklad { position: relative; } .pas-cta__uklad { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); } .pas-cta__tytul { margin: 0 0 8px; color: var(--granat); font-weight: 650; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); } .pas-cta p { margin: 0; font-size: 17px; } .stopka { padding: clamp(56px, 6vw, 80px) 0 0; background: var(--granat); color: rgba(255, 255, 255, .7); font-size: 15px; } .stopka a { color: rgba(255, 255, 255, .85); text-decoration: none; } .stopka a:hover { color: #fff; text-decoration: underline; } .stopka__gora { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; } .stopka__kolumny { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; } .stopka__naglowek { margin: 0 0 16px; color: #fff; font: 600 14px/1.3 var(--font-naglowki); } .stopka ul { margin: 0; padding: 0; list-style: none; } .stopka li { margin: 0 0 10px; } .stopka__marka { display: flex; flex-direction: column; gap: 16px; } .stopka__logo { flex: none; } .stopka__opis { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.55; } .stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding: 24px 0 32px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .7); font-size: 13px; } .stopka__dol p { margin: 0; } @media (max-width: 1199.98px) { .stopka__gora { grid-template-columns: minmax(0, 1fr); } .stopka__kolumny { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .stopka__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- wyszukiwarka ---------- */ .nawigacja__szukaj { display: inline-flex; align-items: center; gap: 8px; color: var(--granat); text-decoration: none; } .nawigacja__szukaj:hover { color: var(--akcent); } .nawigacja__szukaj-tekst { position: absolute; left: -9999px; } @media (max-width: 1199.98px) { .nawigacja__szukaj-tekst { position: static; font-size: 17px; } } .wyszukiwarka { display: flex; gap: 12px; max-width: 760px; } .wyszukiwarka input { flex: 1; min-width: 0; padding: 14px 18px; border: 1px solid var(--obramowanie-pola); border-radius: var(--promien); font: 400 17px/1.3 var(--font-tresc); color: var(--granat); } .wyszukiwarka input:focus { outline: 2px solid var(--akcent); border-color: var(--akcent); } /* pole w nagłówku strony /szukaj (jak w PD): pełna szerokość kolumny, białe tło */ .wyszukiwarka--naglowek { max-width: 980px; margin-top: 28px; } .wyszukiwarka--naglowek input { background: #fff; padding: 16px 22px; } .wyszukiwarka__czesto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; } .wyszukiwarka__czesto span { color: var(--tekst-slaby); font-size: 15px; margin-right: 4px; } .wyszukiwarka__czesto a { padding: 6px 14px; border: 1px solid var(--linia); border-radius: var(--promien); background: #fff; color: var(--granat); font-size: 15px; text-decoration: none; transition: border-color .2s, color .2s; } .wyszukiwarka__czesto a:hover { border-color: var(--akcent); color: var(--akcent-tekst); } /* wyniki: karty jak w PD - miniatura | dział, tytuł, fragment | strzałka; cała karta klikalna */ .wyszukiwarka__wyniki { display: grid; gap: 16px; max-width: none; margin: 0; padding: 0 !important; list-style: none; } .wyszukiwarka__wyniki .wynik { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px 28px; align-items: start; margin: 0 !important; padding: 28px 32px !important; border: 1px solid var(--linia); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; } .wyszukiwarka__wyniki .wynik::before { display: none !important; } .wyszukiwarka__wyniki .wynik--zdjecie { grid-template-columns: 200px minmax(0, 1fr) 32px; } .wynik:hover { border-color: var(--akcent); box-shadow: 0 8px 24px rgba(15, 35, 70, .06); } .wynik:hover .strzalka { background: var(--akcent); border-color: var(--akcent); color: #fff; } .wynik:focus-within { outline: 2px solid var(--akcent); outline-offset: 2px; } .wynik__zdjecie { display: block; width: 200px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; } .wynik__dzial { margin: 0 0 6px !important; color: var(--akcent-tekst); font: 500 14px/1.3 var(--font-naglowki); } .wynik__tytul { margin: 0 0 8px !important; color: var(--granat); font: 500 22px/1.3 var(--font-naglowki); letter-spacing: 0; } .wynik__link { color: inherit; text-decoration: none; } .wynik__link:focus { outline: none; } .wynik__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } .wynik__fragment { margin: 0 !important; color: var(--tekst); font-size: 16px; line-height: 1.55; } .wynik .strzalka { color: var(--granat); } /* podświetlenie bez poziomego odstępu - nie dzieli wyrazów ("mini koparce"); obwódka cieniem, nie paddingiem */ .wynik mark { background: var(--akcent-tlo); color: var(--granat); border-radius: 2px; padding: 0; box-shadow: 0 0 0 1px var(--akcent-tlo); } @media (max-width: 767.98px) { .wyszukiwarka__wyniki .wynik, .wyszukiwarka__wyniki .wynik--zdjecie { grid-template-columns: minmax(0, 1fr); padding: 18px !important; gap: 12px; } /* telefon: miniatura 72 x 72 obok tytułu, fragment do 3 linii - zwarte karty (audyt 3, UX 10) */ .wyszukiwarka__wyniki .wynik--zdjecie { grid-template-columns: 72px minmax(0, 1fr); gap: 0 14px; align-items: start; } .wynik__zdjecie { width: 72px; height: 72px; aspect-ratio: 1; border-radius: 8px; } .wynik .strzalka { display: none; } .wynik__tytul { font-size: 18px; } .wynik__dzial { font-size: 13px; } .wynik__fragment { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 15px; } .wyszukiwarka--naglowek { flex-wrap: wrap; } .wyszukiwarka--naglowek input { flex-basis: 100%; } } /* ---------- mapa strony ---------- */ .mapa-strony { columns: 3 300px; column-gap: 48px; } .mapa-strony__sekcja { break-inside: avoid; margin-bottom: 32px; } .mapa-strony h2 { margin: 0 0 10px; font-size: 1.25rem; } .mapa-strony h2 a { text-decoration: none; } .mapa-strony ul { margin: 0; padding: 0 !important; list-style: none; } .mapa-strony li { margin: 4px 0 !important; padding: 0 !important; font-size: 15px; } .mapa-strony li::before { display: none !important; } .mapa-strony__poziom-2 { padding-left: 16px !important; } .mapa-strony__poziom-3 { padding-left: 32px !important; } /* ---------- baner cookies ---------- */ .przycisk--obrys { background: #fff; color: var(--granat); box-shadow: inset 0 0 0 1.5px var(--granat); } .przycisk--obrys:hover, .przycisk--obrys:focus-visible { background: var(--akcent-tlo); color: var(--granat); } .cookies { position: fixed; left: 50%; bottom: 20px; z-index: 1100; display: flex; align-items: center; gap: 16px 28px; width: min(1080px, calc(100% - 32px)); padding: 18px 24px; transform: translateX(-50%); border: 1px solid var(--linia); border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(11, 37, 69, .18); font-size: 14px; line-height: 1.5; } .cookies[hidden] { display: none; } .cookies p { margin: 0; } .cookies__tytul { color: var(--granat); font: 600 15px/1.3 var(--font-naglowki); margin-bottom: 2px !important; } .cookies__przyciski { display: flex; flex: none; gap: 10px; } .stopka__link { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .85); font: inherit; cursor: pointer; } .stopka__link:hover { color: #fff; text-decoration: underline; } @media (max-width: 767.98px) { .cookies { flex-direction: column; align-items: stretch; bottom: 12px; } .cookies__przyciski > * { flex: 1; } } /* ---------- telefon i tablet ---------- */ @media (max-width: 991.98px) { .hero__uklad, .naglowek-strony--zdjecie .naglowek-strony__uklad, .sekcja__uklad, .sekcja__naglowek { grid-template-columns: minmax(0, 1fr); } .hero::before { top: auto; bottom: -30%; width: 120vw; } .sekcja__tytul h2 { max-width: none; } .sekcja__tresc { padding-top: 0; } .sciezki__lista { grid-template-columns: minmax(0, 1fr); } .sciezki__lista li + li { border-left: 0; border-top: 1px solid var(--linia); } .sciezki__pozycja, .sciezki__lista li:first-child .sciezki__pozycja { padding: 22px 0; } .sekcja .ramka--fakty ul > li + li, .wstep .ramka--fakty ul > li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linia); } .karta-cta { flex-direction: column; align-items: flex-start; padding: 20px 24px; } .pas-cta__uklad { flex-direction: column; align-items: flex-start; } .stopka__dol { grid-template-columns: minmax(0, 1fr); } .stopka__marka { flex-direction: column; } .stopka .stopka__linki { justify-content: flex-start; } .stopka__prawa { margin-left: 0 !important; } } @media (max-width: 599.98px) { .zaufanie, .hero .zaufanie { flex-direction: column; } .tabela { border-radius: 0; margin: 0 calc(var(--margines) * -1); border-left: 0; border-right: 0; } .tabela th, .tabela td { padding: 12px 14px; } .ramka { padding: 20px; } } /* ---- audyt 1: dostępność, formularze, CTA (zespół A) */ /* tekst tylko dla czytników ekranu */ .dla-czytnikow { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* fokus na ciemnym i niebieskim tle - biały obrys */ .stopka :focus-visible, .sekcja--ciemna :focus-visible { outline-color: #fff; } main:focus { outline: none; } /* cele dotykowe min. 44 x 44 px */ .nawigacja__jezyk, .nawigacja__szukaj { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* kwoty w tabelach nie łamią się */ .tabela td.t-right, .tabela th.t-right { white-space: nowrap; } .tabela:focus-visible { outline-offset: 2px; } /* karty: link tylko na tytule, cała karta klikalna (rozciągnięty obszar linku) */ .karta { position: relative; margin: 0; } .karta__tytul { margin: 0; } .karta__link { color: inherit; text-decoration: none; } .karta__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .karta__link:focus-visible { outline: none; } .karta:has(.karta__link:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 3px; } .karta:hover .karta__link { color: var(--granat); } .stopka__naglowek a { text-decoration: none; } /* przyklejony przycisk (telefon): pokazuje go serwis.js po zniknięciu głównego CTA; ukryty, gdy otwarty baner cookies */ @media (max-width: 767.98px) { .przycisk--przyklejony { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 950; box-shadow: 0 12px 30px rgba(11, 37, 69, .25); } .przycisk--przyklejony[hidden], .cookies-otwarte .przycisk--przyklejony { display: none; } html.przyklejony-widoczny { scroll-padding-bottom: 88px; } .przyklejony-widoczny .stopka { padding-bottom: 72px; } /* zdjęcie nagłówka pod tekstem: niski pas zamiast pełnego 4:3 */ .naglowek-strony__zdjecie img { aspect-ratio: 16 / 9; max-height: 220px; } } .podziekowanie p { margin: 0 0 8px; } /* ograniczony ruch: bez animacji i płynnego przewijania */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .wyszukiwarka__liczba { margin: 0 0 16px !important; color: var(--tekst); font: 400 16px/1.4 var(--font-tresc); } .wyszukiwarka__wyniki .wynik[hidden] { display: none; } .wyszukiwarka__wiecej { margin-top: 20px; border: 1px solid var(--obramowanie-pola); } .wyszukiwarka__brak .wyszukiwarka__czesto { margin-top: 20px; } .wyszukiwarka__dzialy { margin-top: 32px; } .wyszukiwarka__brak { max-width: none; } /* ---------- audyt 1, faza 2: rytm, etykiety sekcji, ikony, karty, formularz (zespół E) ---------- */ /* etykieta nad tytułem sekcji ("● Pytania") - z "## Tytuł {etykieta=...}" albo domyślna w szablonie */ .etykieta { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--tekst-slaby); font: 500 14px/1.3 var(--font-naglowki); letter-spacing: 0; } .etykieta::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); } .sekcja__naglowek .etykieta { margin-bottom: 14px; } /* sekcja na granatowym tle ("## Tytuł {tlo=ciemne}") */ .sekcja--ciemna { background: var(--granat); color: rgba(255, 255, 255, .82); } .sekcja--ciemna h2, .sekcja--ciemna h3, .sekcja--ciemna strong { color: #fff; } .sekcja--ciemna .etykieta { color: rgba(255, 255, 255, .72); } .sekcja--ciemna .etykieta::before { background: var(--na-ciemnym); } .sekcja--ciemna a:not(.przycisk) { color: #fff; text-decoration-color: var(--na-ciemnym); } .sekcja--ciemna a:not(.przycisk):hover { color: #fff; text-decoration-thickness: 2px; } .sekcja--ciemna .ramka--kroki li::before { color: rgba(255, 255, 255, .7); font-weight: 300; } .sekcja.sekcja--ciemna .ramka--kroki li { border-top: 2px solid var(--na-ciemnym); } .sekcja--ciemna .ramka--kroki li strong { color: #fff; } .sekcja--ciemna .przycisk { background: #fff; color: var(--granat); } .sekcja--ciemna .przycisk:hover { background: var(--akcent-tlo); color: var(--granat); } /* ikona liniowa w kółku (karty "::: karty" z {ikona=...}, kolumna formularza) */ .ikona-karty { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--akcent-tlo); color: var(--akcent); } .ramka--karty li.karta-ikona > .ikona-karty { display: flex; margin-bottom: 22px; } .ramka--karty li > .ikona-karty + strong { display: block; margin-bottom: 10px; font: 600 20px/1.3 var(--font-naglowki); letter-spacing: -0.01em; } /* karta z linkiem w tytule ("- **[Tytuł](/adres)** opis") - cała karta klikalna */ .ramka--karty li { position: relative; transition: border-color .2s, transform .2s, box-shadow .2s; } .ramka--karty li > strong a { color: inherit; text-decoration: none; } .ramka--karty li > strong a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } .ramka--karty li > strong a:focus-visible { outline: none; } .ramka--karty li:has(> strong a:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 3px; } .ramka--karty li:has(> strong a):hover { border-color: var(--akcent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11, 37, 69, .08); } /* liczba kart niepodzielna przez 4 -> 3 kolumny */ @media (min-width: 1200px) { .karty { grid-template-columns: repeat(4, minmax(0, 1fr)); } .karty--3, .sekcja .ramka--karty ul:not(:has(> li:nth-child(4n):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* karty stron: uniesienie i cień, strzałka w kółku zamiast "Zobacz", opis najwyżej 2 linie */ .karta { transition: border-color .2s, transform .2s, box-shadow .2s; } .karta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11, 37, 69, .08); } @media (prefers-reduced-motion: reduce) { .karta:hover { transform: none; } } /* opis skraca PHP (kb_opis_karty: pełne zdanie albo wyraz z wielokropkiem); clamp tylko jako zabezpieczenie */ .karta__opis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .karta__wiecej { padding-top: 14px; } .karta__wiecej .strzalka { color: var(--akcent); } .karta:hover .strzalka { background: var(--akcent); border-color: var(--akcent); color: #fff; } .karta--zdjecie { padding: 0 0 24px; overflow: hidden; } .karta--zdjecie > :not(.karta__zdjecie) { margin-left: 24px; margin-right: 24px; } .karta__zdjecie { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 8px; background: var(--tlo-sekcji); } .karty--zdjecia .karta__tytul { font-size: 19px; } .akcje-tresci { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 28px 0 0; } /* przypis pod tabelą (np. stawki referencyjne: odesłanie do administratora wskaźników) */ .tabela-przypis { margin: 12px 0 0; color: var(--tekst-slaby); font-size: 15px; } /* skróty do grup huba pod nagłówkiem strony */ .skroty ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; } .skroty a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px 8px 18px; border: 1px solid var(--obramowanie-pola); border-radius: var(--promien); background: #fff; color: var(--granat); font: 500 15px/1.2 var(--font-naglowki); text-decoration: none; transition: border-color .2s; } .skroty a:hover { border-color: var(--akcent); color: var(--granat); } .skroty__liczba { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--akcent-tlo); color: var(--granat); font-size: 13px; } /* mega-menu: link "Wszystkie (N)" pod skróconą listą grupy */ .panel__linki .panel__wszystkie { margin-top: 14px; } .panel__linki .panel__wszystkie a { display: inline-flex; align-items: center; gap: 8px; color: var(--akcent); font: 500 15px/1.3 var(--font-naglowki); } .panel__linki .panel__wszystkie a:hover { color: var(--akcent-hover); } /* menu na telefonie: linki pomocnicze i przycisk na całą szerokość na dole panelu */ .nawigacja__telefon { display: none; } @media (max-width: 1199.98px) { .nawigacja__boczne { margin-top: 24px; padding-top: 24px; } /* bez margin-top: auto - bez luki przy krótkim menu (audyt 3, UX 23) */ .nawigacja__telefon { display: grid; margin: 0; padding: 0; list-style: none; } /* linki pomocnicze są na telefonie w liście .nawigacja__telefon (bez dubli) */ .nawigacja__pomocniczy { display: none; } .nawigacja__telefon a { display: flex; align-items: center; min-height: 44px; color: var(--granat); font: 400 17px/1.3 var(--font-naglowki); text-decoration: none; } .nawigacja__telefon a[aria-current] { color: var(--akcent); } .nawigacja__boczne .przycisk { order: 10; width: 100%; padding: 16px 28px; font-size: 16px; } .nawigacja__jezyk { align-self: flex-start; width: 44px; height: 44px; border: 1px solid var(--obramowanie-pola); border-radius: 50%; color: var(--granat); } .nawigacja__szukaj { justify-content: flex-start; } } /* przycisk "do góry" (długie strony, po przewinięciu 2 ekranów) */ .do-gory { position: fixed; right: 24px; bottom: 24px; z-index: 940; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--obramowanie-pola); border-radius: 50%; background: #fff; color: var(--granat); box-shadow: 0 8px 24px rgba(11, 37, 69, .14); cursor: pointer; transition: background-color .2s, color .2s; } .do-gory svg { transform: rotate(-90deg); } .do-gory:hover { background: var(--akcent); border-color: var(--akcent); color: #fff; } .do-gory[hidden], .cookies-otwarte .do-gory, .menu-otwarte .do-gory { display: none; } @media (max-width: 991.98px) { html:has(.kalkulator, .formularz) .do-gory { display: none; } } /* otwarte menu telefonu: baner cookies nie zasłania menu (wraca po zamknięciu menu) */ .menu-otwarte .cookies { display: none; } @media (max-width: 767.98px) { .do-gory { right: 16px; } /* przy przyklejonym przycisku "do góry" jest ukryty (audyt 2, G-N7 - na końcu pliku) */ } /* FAQ z 1-2 pytaniami: jedna kolumna */ .faq--krotki .sekcja__uklad { grid-template-columns: minmax(0, 1fr); } .faq--krotki .sekcja__tresc { max-width: none; } .faq--krotki .sekcja__tytul h2 { max-width: none; } /* kroki: równe kolumny także przy krótkich opisach */ @media (min-width: 768px) { .sekcja .ramka--kroki li, .wstep .ramka--kroki li { min-height: 180px; } } @media (max-width: 599.98px) { /* okruszki: tylko "← poziom nadrzędny" */ .okruszki li { display: none; } .okruszki li:nth-last-child(2) { display: block; } .okruszki li:nth-last-child(2)::before { content: "\2190"; content: "\2190" / ""; margin-right: 8px; color: var(--granat); } } .sekcja__tresc:empty { display: none; } /* link "Wszystkie ..." pod siatką kart */ .sekcja__szeroka:has(.karty, .ramka--karty) + .sekcja__tekst > p:only-child > a:only-child { color: var(--granat); font: 500 16px/1.2 var(--font-naglowki); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: 6px; } .sekcja__szeroka:has(.karty, .ramka--karty) + .sekcja__tekst > p:only-child > a:only-child::after { content: " \2192"; content: " \2192" / ""; } .sekcja--ciemna .sekcja__dalej { margin-top: 48px; } @media (max-width: 599.98px) { /* karty ze zdjęciem na telefonie: 2 kolumny, sam tytuł */ .karty--zdjecia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .karty--zdjecia .karta { padding-bottom: 16px; gap: 6px; } .karty--zdjecia .karta > :not(.karta__zdjecie) { margin-left: 14px; margin-right: 14px; } .karty--zdjecia .karta__tytul { font-size: 16px; } .karty--zdjecia .karta__opis, .karty--zdjecia .karta__wiecej { display: none; } } @media (min-width: 1200px) { .panel__grupy--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 1199.98px) { .panel__grupy--5 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; } } @media (min-width: 1200px) { .panel__wnetrze:has(.panel__grupy--5) { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; } .panel__grupy--5 .panel__linki a { font-size: 15px; } } @media (max-width: 599.98px) { /* strona ze zdjęciem w nagłówku: "ptaszki" zwinięte do jednej linii, żeby nie spychały krótkiej odpowiedzi */ .naglowek-strony--zdjecie .zaufanie { margin-top: 18px; font-size: 13px; } .naglowek-strony--zdjecie .zaufanie li:not(:first-child) { display: none; } .naglowek-strony--zdjecie .naglowek-strony__uklad { gap: 24px; padding-bottom: 28px; } .naglowek-strony--zdjecie .naglowek-strony__zdjecie img { max-height: 160px; } .naglowek-strony + .wstep { padding-top: 28px; } } .karta--ikona > .ikona-karty { margin-bottom: 8px; } @page { size: A4; margin: 14mm 14mm 16mm; } @media print { html, body { background: #fff; font-size: 11pt; } .naglowek, .stopka, .cookies, .pas-cta, .do-gory, .spis-pasek, .pomin, .przycisk--przyklejony, .okruszki, .udostepnij, [data-komunikat-strony] { display: none !important; } thead { display: table-header-group; } tr, li { break-inside: avoid; page-break-inside: avoid; } h2, h3 { break-after: avoid; page-break-after: avoid; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ---------- mega-menu: karty narzędzi (Kalkulatory) i kafle tematów (Baza wiedzy) ---------- */ .panel__narzedzia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } .panel__karty { margin: 0; padding: 0; list-style: none; } .panel__karty { display: grid; gap: 8px; } .panel__karta { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--linia); border-radius: 12px; background: #fff; color: var(--granat); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .panel__karta:hover, .panel__karta[aria-current] { border-color: var(--akcent); box-shadow: 0 10px 24px rgba(11, 37, 69, .08); transform: translateY(-1px); color: var(--granat); } .panel__karta-ikona { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--akcent-tlo); color: var(--akcent); } .panel__karta-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .panel__karta-tytul { font: 600 15px/1.3 var(--font-naglowki); } .panel__karta-opis { color: var(--tekst-slaby); font: 400 14px/1.4 var(--font-tresc); } .panel__karty--tematy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; } .panel__karty li { display: flex; } .panel__karty .panel__karta { flex: 1; } @media (max-width: 1199.98px) { .panel__narzedzia { grid-template-columns: minmax(0, 1fr); gap: 20px; } .panel__karty--tematy { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .panel__karta { transition: none; } .panel__karta:hover { transform: none; } } .panel__naglowek a { color: inherit; text-decoration: none; } .panel__naglowek a:hover, .panel__naglowek a[aria-current] { color: var(--granat); } .panel__grupy--tematy { row-gap: 28px; } /* panel Wiedza: skróty pod tytułem (jak w PD) */ .panel__skroty { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -12px 0 28px; padding: 0; list-style: none; } .panel__skroty a { color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); text-decoration: underline; text-decoration-color: var(--akcent); text-underline-offset: 5px; } .panel__skroty a:hover { color: var(--akcent); } .panel__grupy--3 { row-gap: 28px; } /* nagłówek 1200-1439 px: menu, lupa, Dla pośredników, EN i CTA w jednej linii */ @media (min-width: 1200px) and (max-width: 1439.98px) { .nawigacja__lista { gap: 0 16px; } .nawigacja__boczne { gap: 12px; padding-left: 16px; } .nawigacja__przelacznik, .nawigacja__link { font-size: 15px; } .nawigacja__pomocniczy { font-size: 14px; } .naglowek__pasek { gap: 24px; } } @media (min-width: 1200px) and (max-width: 1279.98px) { .nawigacja__lista { gap: 0 13px; } .nawigacja__boczne { gap: 10px; padding-left: 12px; } .naglowek__pasek { gap: 18px; } .logo__obraz { height: 30px; } } /* ---------- spis treści długich stron (czesci/tresc.php, kb_spis) ---------- */ /* zwinięty blok pod wstępem; na komputerze rozwija go serwis.js; numery sekcji w kolorze morskim (--akcent-tekst) */ .spis { margin-top: 20px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; } .spis summary { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 16px 64px 16px 24px; color: var(--granat); font: 600 17px/1.35 var(--font-naglowki); list-style: none; cursor: pointer; } .spis summary::-webkit-details-marker { display: none; } .spis summary:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 16px; } .spis__tytul { display: inline-flex; align-items: center; gap: 10px; } .spis__tytul::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); } .spis__liczba { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--akcent-tlo); color: var(--granat); font-size: 13px; font-weight: 500; } .spis__ikona { position: absolute; right: 20px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 1px solid var(--obramowanie-pola); border-radius: 50%; background: #fff; } .spis__ikona::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border: solid var(--granat); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; } .spis details[open] .spis__ikona::before { margin-top: -2px; transform: rotate(-135deg); } .spis__lista { margin: 0; padding: 0 24px 16px; list-style: none; counter-reset: spis; columns: 2 300px; column-gap: 40px; } .spis__lista li { position: relative; margin: 0; padding: 10px 0 10px 40px; border-top: 1px solid var(--linia); break-inside: avoid; counter-increment: spis; } .spis__lista li::before { content: counter(spis, decimal-leading-zero); position: absolute; left: 0; top: 11px; color: var(--akcent-tekst); font: 600 14px/1.5 var(--font-naglowki); } .spis__lista a { color: var(--granat); font-size: 16px; line-height: 1.45; text-decoration: none; } .spis__lista a:hover, .spis__lista a:focus-visible { color: var(--akcent); text-decoration: underline; } /* bieżąca sekcja (serwis.js: aria-current="location") - kolor, grubość i znacznik, nie sam kolor (WCAG 1.4.1) */ .spis__lista a[aria-current] { color: var(--granat); font-weight: 650; text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; } .spis__lista li:has(> a[aria-current])::before { color: var(--akcent); } /* przyklejony pasek spisu (serwis.js): pod nagłówkiem po minięciu spisu, rozwija tę samą listę */ .spis-pasek { position: fixed; top: var(--wys-naglowka); left: 0; right: 0; z-index: 990; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--linia); box-shadow: 0 8px 24px rgba(11, 37, 69, .06); } .spis-pasek[hidden], .menu-otwarte .spis-pasek, .panel-otwarty .spis-pasek { display: none; } .spis-pasek__przycisk { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 52px 8px 0; border: 0; background: none; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); text-align: left; cursor: pointer; } .spis-pasek__przycisk:focus-visible { outline-offset: -2px; } .spis-pasek__przycisk .spis__ikona { right: 0; } .spis-pasek__etykieta { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--tekst-slaby); font-size: 14px; } .spis-pasek__etykieta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); } .spis-pasek__biezaca { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; } .spis-pasek__biezaca:not(:empty)::before { content: "·"; margin-right: 12px; color: var(--tekst-slaby); font-weight: 400; } .spis-pasek--otwarty .spis__ikona::before { margin-top: -2px; transform: rotate(-135deg); } .spis-pasek__panel { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; } .spis-pasek__panel .spis__lista { columns: 1; padding: 0; } html.spis-pasek-widoczny { scroll-padding-top: calc(var(--wys-naglowka) + 64px); } /* kotwice sekcji: nad H2 stoi etykieta z kropką - cel przewija się razem z nią (audyt 3, UX 16) */ .sekcja__tytul h2[id] { scroll-margin-top: 40px; } .sekcja .karta-cta { margin-top: clamp(32px, 4vw, 48px); } @media (max-width: 599.98px) { .spis summary { padding: 14px 60px 14px 18px; } .spis__ikona { right: 14px; } .spis__lista { padding: 0 18px 12px; } } @media (prefers-reduced-motion: reduce) { .spis__ikona::before { transition: none; } } /* ---------- strona główna: karta z narzędziem (pole hero_kalkulator) i skróty z karta_linki pod przyciskami ---------- */ .hero__narzedzie .hero__karta-przypis { padding: 0 8px; } /* telefon i tablet: karta kalkulatora zaraz pod przyciskami, przed ptaszkami i skrótami (audyt 3, UX 4) */ @media (max-width: 991.98px) { .hero--narzedzie .hero__uklad { gap: 0; } .hero--narzedzie .hero__tekst { display: contents; } .hero--narzedzie .hero__narzedzie { order: 1; margin-top: 32px; } .hero--narzedzie .zaufanie, .hero--narzedzie .hero__skroty { order: 2; } .hero--narzedzie .zaufanie { margin-top: 28px; } } .hero__skroty { margin-top: 32px; } .hero__skroty-tytul { margin: 0; color: var(--tekst-slaby); font: 500 14px/1.3 var(--font-naglowki); } .hero__skroty ul { margin-top: 12px; } /* ---------- audyt 1: poprawki wyglądu (zespół C) ---------- */ /* baner cookies otwarty: element z fokusem nie chowa się pod banerem (WCAG 2.4.11; audyt 1, K-W10) */ html.cookies-otwarte { scroll-padding-bottom: 140px; } @media (max-width: 767.98px) { html.cookies-otwarte { scroll-padding-bottom: 240px; } } /* kadrowanie zdjęć kart i nagłówka (pole zdjecie_pozycja: gora, dol, lewo, prawo; audyt 1, G-19) */ .zdjecie--gora { object-position: 50% 15%; } .zdjecie--dol { object-position: 50% 85%; } .zdjecie--lewo { object-position: 15% 50%; } .zdjecie--prawo { object-position: 85% 50%; } @media (max-width: 991.98px) { /* dekoracyjne koło hero: na wąskim ekranie bez półokręgu między kartą a ścieżkami (G-34) */ .hero::before { display: none; } } @media (max-width: 599.98px) { /* kroki, fakty i karty bez wcięcia ramki - trzymają lewą krawędź tekstu (G-2) */ .ramka--kroki, .ramka--fakty, .ramka--karty { padding: 0; } /* kroki zwarte: numer obok tytułu, nie nad nim (G-23) */ .sekcja .ramka--kroki ol, .wstep .ramka--kroki ol { gap: 20px; } .sekcja .ramka--kroki ol > li, .wstep .ramka--kroki ol > li { position: relative; padding: 18px 0 0 52px; } .ramka--kroki li::before { position: absolute; left: 0; top: 18px; margin: 0; font-size: 30px; } /* stopka: grupy linków w dwóch kolumnach, bez "Polecane na start" (G-15) */ .stopka__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .stopka__polecane { display: none; } .stopka__naglowek { letter-spacing: .08em; } /* "ptaszki" pod przyciskiem czytelne także na stronach ze zdjęciem (G-33) */ .naglowek-strony--zdjecie .zaufanie { font-size: 15px; } } /* ---------- audyt 2: poprawki wyglądu (zespół C) ---------- */ /* 768-1199 px: menu zwinięte pod przyciskiem "Menu" - przycisk paska obok niego, żeby główna akcja była zawsze pod ręką (G-N1). Poniżej 768 px tę rolę ma przyklejony przycisk na dole ekranu, od 1200 px - przycisk w menu. */ .naglowek__cta { display: none; } @media (min-width: 768px) and (max-width: 1199.98px) { .naglowek__cta { display: inline-flex; flex: none; margin-left: auto; } .naglowek__cta + .naglowek__burger { margin-left: 0; } .naglowek__pasek:has(.naglowek__cta) { gap: 24px; } .menu-otwarte .naglowek__cta { display: none; } .menu-otwarte .naglowek__cta + .naglowek__burger { margin-left: auto; } } /* "Dla pośredników" na podstronach sekcji (aria-current="true") i na niej samej - jak pozycje menu: granat i kreska (G-N19) */ .nawigacja__pomocniczy[aria-current] { color: var(--granat); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: 8px; } /* tabele w treści na telefonie: pierwsza kolumna ("Cecha") zostaje przy przewijaniu w bok (G-N6) */ @media (max-width: 767.98px) { .tabela th:first-child, .tabela td:first-child { position: sticky; left: 0; z-index: 1; min-width: 112px; max-width: 40vw; background: #fff; box-shadow: 8px 0 8px -8px rgba(11, 37, 69, .25); } .tabela thead th:first-child { background: var(--granat); } .tabela tbody th { width: auto; } } /* przycisk "do góry" na telefonie: nie przy przyklejonym przycisku - kółko zasłaniało tekst i linki w kolumnie 343 px (G-N7) */ @media (max-width: 767.98px) { .przyklejony-widoczny .do-gory { display: none; } } /* ---------- strona główna (wytyczne brand/UX v1.0, rozdz. 07-08 i 15) ---------- */ .przycisk--obrys-jasny { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); } .przycisk--obrys-jasny:hover, .przycisk--obrys-jasny:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; } .bx-hero { position: relative; overflow: hidden; background: var(--granat); color: #fff; } .bx-hero__zdjecie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; } /* nakładka pod tekstem: granat od lewej - kontrast tekstu niezależny od zdjęcia */ .bx-hero--zdjecie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 46, 107, .96) 0%, rgba(11, 46, 107, .88) 45%, rgba(11, 46, 107, .35) 100%); } .bx-hero__uklad { position: relative; z-index: 1; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); } .bx-hero__marka { margin: 0 0 16px; color: #C9D6E3; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .bx-hero__tytul { max-width: 18ch; color: #fff; } .bx-hero__lead { max-width: 56ch; margin: 20px 0 0; color: #E3EAF2; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); } .bx-hero__akcje { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 32px 0 0; } .bx-hero__akcje .przycisk svg { flex: none; } .bx-sekcja-naglowek { margin-bottom: 24px; } .bx-sekcja-naglowek h2 { margin: 0 0 8px; } .bx-sekcja-naglowek p { max-width: 70ch; margin: 0; color: var(--tekst-slaby); } .bx-sekcja-naglowek--link { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; } .bx-produkty { padding-top: 0; } .bx-produkty .kontener { position: relative; z-index: 2; margin-top: -40px; } .bx-karty-produktow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bx-karty-produktow .karta { border-radius: var(--promien-karty); background: #fff; } .bx-kroki h2 { margin-top: 0; } .bx-kroki__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: krok; } .bx-krok { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-content: start; } .bx-krok__numer { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tlo-sekcji); color: var(--granat); font-size: 14px; font-weight: 600; } .bx-krok__ikona { color: var(--akcent); } .bx-krok__tytul { grid-column: 1 / -1; margin: 12px 0 0; font-size: 18px; } .bx-krok p { grid-column: 1 / -1; margin: 0; color: var(--tekst-slaby); font-size: 15px; } .bx-zalety__panel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px 40px; align-items: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--promien-karty); background: var(--tlo-sekcji); } .bx-zalety__panel h2 { margin: 0; } .bx-zalety__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } .bx-zalety__lista li { padding-left: 20px; border-left: 1px solid var(--linia); } .bx-zalety__ikona { color: var(--akcent); } .bx-zalety__lista h3 { margin: 10px 0 6px; font-size: 17px; } .bx-zalety__lista p { margin: 0; color: var(--tekst-slaby); font-size: 15px; } .bx-tematy { margin-top: 24px; } .bx-tematy__tytul { margin: 0 0 12px; color: var(--tekst-slaby); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .bx-tematy ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .bx-tematy a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--linia); border-radius: var(--promien); background: #fff; color: var(--granat); font-size: 15px; text-decoration: none; } .bx-tematy a:hover, .bx-tematy a:focus-visible { border-color: var(--akcent); color: var(--akcent); } @media (max-width: 1199.98px) { .bx-karty-produktow, .bx-kroki__lista, .bx-zalety__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx-zalety__panel { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767.98px) { .bx-karty-produktow, .bx-kroki__lista, .bx-zalety__lista { grid-template-columns: minmax(0, 1fr); } .bx-produkty .kontener { margin-top: -24px; } .bx-hero__akcje .przycisk { width: 100%; } } /* odstępy sekcji strony głównej z siatki 8 px (wytyczne, rozdz. 05): 48-64 px zamiast 112 px - sąsiednie sekcje bez podwójnej przerwy */ .bx-kalkulator, .bx-kroki, .bx-zalety, .bx-wiedza { padding: clamp(40px, 5vw, 64px) 0; } .bx-produkty { padding-bottom: clamp(24px, 3vw, 32px); } .bx-kalkulator { padding-top: clamp(24px, 3vw, 32px); } .bx-karty-produktow .karta__opis { display: block; } .bx-hero__obraz { position: absolute; inset: 0; } .bx-hero__obraz .bx-hero__zdjecie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; } @media (max-width: 767.98px) { .bx-hero--zdjecie::after { background: rgba(11, 46, 107, .9); } } /* ---------- strona główna wg makiety layout_bank.png (2026-11-05) ---------- */ .bx-hero__marka { color: #E6F0FA; } .bx-hero__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; color: #fff; font-weight: 500; text-decoration: none; } .bx-hero__link:hover, .bx-hero__link:focus-visible { color: #fff; text-decoration: underline; } .bx-hero__link-ikona { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 50%; } /* karty produktów: niskie, poziome - ikona po lewej, tytuł ze strzałką, opis pod spodem; pod hero, bez nachodzenia */ .bx-produkty { padding: 24px 0 0; } .bx-produkty .kontener { margin-top: 0; } .bx-karty-produktow { gap: 16px; } .bx-karty-produktow .karta { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px 18px 18px 16px; } .bx-karty-produktow .ikona-karty { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--granat); } .bx-karty-produktow .karta__tytul { grid-column: 2; margin: 2px 0 0; font-size: 17px; } .bx-karty-produktow .karta__opis { grid-column: 2; margin: 0; font-size: 14px; color: var(--tekst-slaby); } .bx-karty-produktow .karta__wiecej { grid-column: 3; grid-row: 1; margin: 0; } .bx-karty-produktow .karta__wiecej .strzalka { width: auto; height: auto; border: 0; color: var(--akcent); } /* kalkulator: tytuł i kalkulator w jednej jasnej karcie, wynik jako wpuszczony granatowy panel */ .bx-kalkulator__panel { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--linia); border-radius: var(--promien-karty); background: var(--tlo-sekcji); } .bx-kalkulator__panel .bx-sekcja-naglowek { margin-bottom: 8px; } .bx-kalkulator__panel .bx-sekcja-naglowek h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); } .bx-kalkulator__panel .kalkulator { gap: 24px; border: 0; background: none; box-shadow: none; overflow: visible; } .bx-kalkulator__panel .kalkulator__formularz { padding: 8px 0 0; } .bx-kalkulator__panel .kalkulator__wynik { border-radius: var(--promien-karty); padding: 28px; } .bx-kalkulator__panel .kalkulator__eksport { padding: 0; border: 0; background: none; } .bx-kalkulator__panel .kalkulator__z-suwakiem input[type="number"], .bx-kalkulator__panel .kalkulator__z-suwakiem input[data-liczba] { background: #fff; } /* „Jak to działa?”: strzałki między krokami (desktop) */ @media (min-width: 1200px) { .bx-krok:not(:last-child)::after { content: "\2192"; position: absolute; top: 56px; right: -18px; color: var(--tekst-slaby); font-size: 20px; } } @media (max-width: 1199.98px) { .bx-karty-produktow .karta { grid-template-columns: 40px minmax(0, 1fr) auto; } } /* hero wg makiety: niższy pas, nakładka granatowa tylko pod tekstem - po prawej widać zdjęcie z ciepłymi światłami biurowca */ .bx-hero__zdjecie { object-position: right 45%; } .bx-hero--zdjecie::after { background: linear-gradient(90deg, rgba(11, 46, 107, .97) 0%, rgba(11, 46, 107, .9) 34%, rgba(11, 46, 107, .45) 58%, rgba(11, 46, 107, 0) 78%); } .bx-hero__uklad { padding-top: clamp(40px, 4.5vw, 64px); padding-bottom: clamp(40px, 4.5vw, 64px); } @media (max-width: 767.98px) { .bx-hero--zdjecie::after { background: linear-gradient(90deg, rgba(11, 46, 107, .95) 0%, rgba(11, 46, 107, .82) 60%, rgba(11, 46, 107, .55) 100%); } } /* belka nagłówka wg makiety: jeden niski rząd - logo | menu na środku | wyszukiwarka + CTA; pasek narzędziowy wyłączony (te linki są w stopce, kolumna „O serwisie”) */ :root { --wys-naglowka: 68px; --wys-narzedzia: 0px; } .naglowek__narzedzia { display: none; } .naglowek { top: 0; } @media (min-width: 1200px) { .naglowek__pasek { gap: 40px; } .nawigacja { flex: 1; margin-left: 0; } .nawigacja__lista { flex: 1; justify-content: center; gap: 0 36px; } .nawigacja__boczne { padding-left: 0; border-left: 0; } } @media (max-width: 1199.98px) { :root { --wys-naglowka: 64px; } } /* hero: tytuł w dwóch wierszach jak na makiecie */ .bx-hero__tytul { max-width: 21ch; } /* karty produktów: większa ikona liniowa bez tła */ .bx-karty-produktow .ikona-karty svg { width: 36px; height: 36px; stroke-width: 1.4; } /* kalkulator na stronie głównej (makieta): w panelu wyniku tylko kwota, przypis i przycisk - szczegóły na stronie kalkulatora */ .bx-kalkulator__panel .kalkulator__wynik .kalkulator__lista { display: none; } .bx-kalkulator__panel .kalkulator__wynik { align-self: center; } .bx-kalkulator__panel .kalkulator__eksport { display: none; } /* hero: zdjęcie w prawej części (ok. 64%), kadr od góry - dach wieżowca, ciepłe piętra, niebo; granat pod tekstem przechodzi w zdjęcie */ @media (min-width: 768px) { .bx-hero__obraz { position: absolute; inset: 0 0 0 auto; width: 64%; } .bx-hero__zdjecie { object-position: center 20%; } .bx-hero--zdjecie::after { background: linear-gradient(90deg, #0B2E6B 0%, #0B2E6B 36%, rgba(11, 46, 107, .7) 46%, rgba(11, 46, 107, .15) 60%, rgba(11, 46, 107, 0) 70%); } } @media (max-width: 767.98px) { .bx-hero__zdjecie { object-position: 60% center; } } /* hero (2026-11-05, obraz wygenerowany w Envato pod makietę): pełna szerokość - po lewej pusty granat nieba pod tekst, po prawej wieżowiec z ciepłymi piętrami */ .bx-hero { background: #0E2A57; } .bx-hero__obraz { position: absolute; inset: 0; width: auto; } .bx-hero__zdjecie { object-position: right center; } .bx-hero--zdjecie::after { background: linear-gradient(90deg, rgba(11, 46, 107, .55) 0%, rgba(11, 46, 107, .35) 40%, rgba(11, 46, 107, 0) 60%); } @media (max-width: 767.98px) { .bx-hero__zdjecie { object-position: 78% center; } .bx-hero--zdjecie::after { background: linear-gradient(90deg, rgba(11, 46, 107, .85) 0%, rgba(11, 46, 107, .7) 100%); } } /* hero: proporcje pasa jak na makiecie (ok. 1:4,5 przy 1440 px) */ @media (min-width: 768px) { .bx-hero__uklad { padding-top: clamp(32px, 3vw, 44px); padding-bottom: clamp(36px, 3.4vw, 48px); } .bx-hero__marka { margin-bottom: 10px; } .bx-hero__tytul { font-size: clamp(2.1rem, 1.4rem + 1.7vw, 2.9rem); line-height: 1.12; } .bx-hero__lead { margin-top: 14px; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); } .bx-hero__akcje { margin-top: 24px; } } /* ========================================================================= Rewizja UI wg oceny projektu (2026-11-05): typografia, rytm, wielkość komponentów. Kontener 1280 px; tekst 16 px, opisy 15-16 px, nagłówki sekcji 28-32 px; odstępy sekcji 64-80 px. ========================================================================= */ :root { --tekst-slaby: #4A5A6E; } /* mocniejszy kontrast tekstu pomocniczego (7,0:1 z bielą) */ h2 { font-size: clamp(1.625rem, 1.35rem + .9vw, 2rem); } .sekcja { padding: clamp(56px, 6vw, 80px) 0; } .bx-kalkulator, .bx-kroki, .bx-zalety, .bx-wiedza { padding: clamp(32px, 3.5vw, 40px) 0; } .bx-produkty { padding: 32px 0 clamp(24px, 3vw, 32px); } .bx-sekcja-naglowek { margin-bottom: 28px; } .bx-sekcja-naglowek p { font-size: 17px; } /* header: większe logo i menu, wyraźniejszy przycisk, mocniejszy kontrast */ @media (min-width: 1200px) { :root { --wys-naglowka: 76px; } .logo__obraz { height: 40px; } .nawigacja__przelacznik, .nawigacja__link { font-size: 16px; font-weight: 500; color: var(--tekst); } .naglowek__cta, .nawigacja__boczne .przycisk { padding: 13px 24px; font-size: 16px; font-weight: 600; box-shadow: 0 4px 12px rgba(47, 111, 195, .25); } } /* karty produktów: większe, równe, wyraźne nazwy */ .bx-karty-produktow { gap: 20px; } .bx-karty-produktow > li { display: flex; } .bx-karty-produktow .karta { flex: 1; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; padding: 24px 22px 24px 22px; box-shadow: 0 2px 10px rgba(18, 39, 68, .05); transition: border-color .2s, box-shadow .2s, transform .2s; } .bx-karty-produktow .karta:hover, .bx-karty-produktow .karta:focus-within { border-color: var(--akcent); box-shadow: 0 10px 28px rgba(18, 39, 68, .1); transform: translateY(-2px); } .bx-karty-produktow .ikona-karty { width: 52px; height: 52px; border-radius: 12px; background: var(--akcent-tlo); color: var(--granat); } .bx-karty-produktow .ikona-karty svg { width: 30px; height: 30px; stroke-width: 1.5; } .bx-karty-produktow .karta__tytul { font-size: 19px; line-height: 1.25; } .bx-karty-produktow .karta__opis { font-size: 15px; line-height: 1.5; color: var(--tekst-slaby); } /* kalkulator: czytelniejsze pola, większa rata */ .bx-kalkulator__panel .bx-sekcja-naglowek h2 { font-size: clamp(1.625rem, 1.35rem + .9vw, 2rem); } .kalkulator__z-suwakiem > .kalkulator__pole > span:first-child { font-size: 17px; color: var(--granat); } .kalkulator__zakres { font-size: 14px; color: var(--tekst-slaby); } .kalkulator__wynik .kalkulator__glowna { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; } .kalkulator__wynik .kalkulator__przypis { font-size: 14px; line-height: 1.5; color: #D5E1EF; } .kalkulator__zalozenia-wyniku { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px; line-height: 1.5; } .kalkulator__zalozenia-wyniku strong { font-weight: 600; } /* „Jak to działa?”: większe numery i ikony, mocniejsze nagłówki, wyraźne połączenia */ .bx-kroki__lista { gap: 32px; margin-top: 32px; } .bx-krok { grid-template-columns: 1fr; gap: 0; padding: 28px 24px; border: 1px solid var(--linia); border-radius: var(--promien-karty); background: #fff; } .bx-krok__numer { position: absolute; top: -16px; left: 24px; width: 34px; height: 34px; background: var(--granat); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 0 0 4px #fff; } .bx-krok__ikona .ikona-karty { width: 56px; height: 56px; border-radius: 14px; background: var(--akcent-tlo); color: var(--granat); } .bx-krok__ikona svg { width: 30px; height: 30px; } .bx-krok__tytul { margin: 18px 0 8px; font-size: 20px; } .bx-krok p { font-size: 16px; line-height: 1.55; } @media (min-width: 1200px) { .bx-krok:not(:last-child)::after { content: ""; top: 50%; right: -26px; width: 20px; height: 20px; border: 0; background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' fill='none' stroke='%232F6FC3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: translateY(-50%); } } /* korzyści: jasnoniebieski panel, większy kontrast i elementy */ .bx-zalety__panel { padding: clamp(28px, 3.5vw, 48px); background: var(--akcent-tlo); } .bx-zalety__panel h2 { font-size: clamp(1.625rem, 1.35rem + .9vw, 2rem); } .bx-zalety__lista { gap: 28px; } .bx-zalety__lista li { padding-left: 24px; border-left: 2px solid rgba(47, 111, 195, .25); } .bx-zalety__ikona .ikona-karty { width: 52px; height: 52px; border-radius: 12px; background: #fff; color: var(--granat); } .bx-zalety__ikona svg { width: 28px; height: 28px; } .bx-zalety__lista h3 { margin: 14px 0 6px; font-size: 18px; } .bx-zalety__lista p { font-size: 16px; line-height: 1.55; color: var(--tekst); } /* stany interaktywne: wyraźny focus klawiatury */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; } .przycisk { transition: background-color .2s, box-shadow .2s, transform .1s; } .przycisk:active { transform: translateY(1px); } /* kontener: 1280 px treści (z marginesami bocznymi) */ :root { --szer: calc(1280px + 2 * var(--margines)); } /* karty produktów: strzałka w rogu, cała szerokość na nazwę i opis */ .bx-karty-produktow .karta { position: relative; grid-template-columns: 52px minmax(0, 1fr); padding-right: 44px; } .bx-karty-produktow .karta__wiecej { position: absolute; top: 26px; right: 20px; } /* korzyści: tytuł nad listą, 4 kolumny na pełnej szerokości panelu */ .bx-zalety__panel { grid-template-columns: minmax(0, 1fr); gap: 28px; } /* mega-menu (2026-11-05): czytelne kolumny - najwyżej 4, pełna szerokość, nagłówki i linki bez łamania */ @media (min-width: 1200px) { .panel__wnetrze:not(:has(.panel__kafel)) { grid-template-columns: minmax(0, 1fr); } .panel__wnetrze { padding-top: 32px; padding-bottom: 40px; } .panel__tytul { margin-bottom: 24px; font-size: 24px; } .panel__skroty { margin: -8px 0 28px; } .panel__grupy, .panel__grupy--2, .panel__grupy--3, .panel__grupy--4, .panel__grupy--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 48px; } .panel__naglowek { margin-bottom: 16px; padding-bottom: 12px; color: var(--granat); font: 700 13px/1.3 var(--font-naglowki); letter-spacing: .08em; white-space: nowrap; } .panel__linki li + li { margin-top: 12px; } .panel__linki a { display: inline-block; color: var(--tekst); font: 500 16px/1.4 var(--font-tresc); white-space: nowrap; } .panel__linki a:hover, .panel__linki a[aria-current] { color: var(--akcent); } } /* ========================================================================= Charakter (2026-11-05): „biurowiec wieczorem” - granat nocy + bursztyn świateł okien jako rzadki sygnał. ========================================================================= */ :root { --noc: #071F4A; --bursztyn: #F0A93B; --bursztyn-tlo: #FDF3E2; } /* ---------- mega-menu ---------- */ @media (min-width: 1200px) { .panel { border-top: 3px solid var(--granat); box-shadow: 0 24px 48px rgba(7, 31, 74, .18); } .panel__wnetrze:has(.panel__kafel) { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; } .panel__wnetrze:has(.panel__kafel) .panel__grupy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; } .panel__tytul { font-size: 26px; letter-spacing: -0.02em; } .panel__naglowek { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--akcent-tlo); color: var(--tekst-slaby); font: 600 14px/1.3 var(--font-naglowki); letter-spacing: 0; text-transform: none; } .panel__linki li + li { margin-top: 4px; } .panel__linki a { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: 8px; color: var(--granat); font-weight: 500; text-decoration: none; } .panel__linki a:hover, .panel__linki a:focus-visible { background: var(--akcent-tlo); color: var(--granat); text-decoration: none; } .panel__linki a[aria-current] { background: var(--akcent-tlo); } .panel__ikona { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--tlo-sekcji); color: var(--akcent); } .panel__ikona .ikona-karty { width: auto; height: auto; background: none; color: inherit; } .panel__linki a:hover .panel__ikona { background: #fff; } /* skróty: przyciski obrysowe zamiast podkreśleń */ .panel__skroty { gap: 10px; margin: -6px 0 28px; } .panel__skroty a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--linia); border-radius: 999px; color: var(--granat); font: 500 15px/1 var(--font-naglowki); text-decoration: none; } .panel__skroty a:hover { border-color: var(--akcent); color: var(--akcent); } } /* kafel-blok: granat nocy, kadr ciepłych pięter, linki i przycisk */ .panel__kafel--blok { display: block; align-self: start; padding: 0; overflow: hidden; border-radius: 14px; background: var(--noc); color: #fff; } .panel__kafel-zdjecie { display: block; width: 100%; height: 112px; object-fit: cover; } .panel__kafel-tresc { padding: 22px 24px 24px; } .panel__kafel--blok .panel__kafel-tytul { margin: 0 0 6px; color: #fff; } .panel__kafel--blok .panel__kafel-tekst { margin: 0 0 14px; color: #C9D6E8; font-size: 15px; } .panel__kafel-linki { margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .14); } .panel__kafel-linki a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 500; text-decoration: none; } .panel__kafel-linki a svg { color: var(--bursztyn); transition: transform .2s; } .panel__kafel-linki a:hover svg { transform: translateX(3px); } .panel__kafel--blok .przycisk { width: 100%; justify-content: center; } /* ---------- strona główna: charakter ---------- */ /* hero: bez etykiety nad tytułem (marka jest w logo) */ .bx-hero__marka { display: none; } @media (min-width: 768px) { .bx-hero__uklad { padding-bottom: clamp(72px, 6vw, 96px); } } /* produkty: jeden biały pas nachodzący na hero, 4 segmenty z liniami między nimi */ .bx-produkty { position: relative; z-index: 2; padding: 0 0 clamp(40px, 4vw, 56px); } .bx-produkty .kontener { margin-top: -56px; } .bx-karty-produktow { gap: 0; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(7, 31, 74, .16); } .bx-karty-produktow .karta { border: 0; border-radius: 0; box-shadow: none; padding: 28px 44px 30px 26px; } .bx-karty-produktow > li + li .karta { border-left: 1px solid var(--linia); } .bx-karty-produktow .karta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--bursztyn); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .bx-karty-produktow .karta:hover, .bx-karty-produktow .karta:focus-within { transform: none; box-shadow: none; background: #FBFCFE; } .bx-karty-produktow .karta:hover::before, .bx-karty-produktow .karta:focus-within::before { transform: scaleX(1); } .bx-karty-produktow .ikona-karty { background: var(--noc); color: var(--bursztyn); } @media (max-width: 1199.98px) { .bx-karty-produktow > li:nth-child(odd) .karta { border-left: 0; } .bx-karty-produktow > li:nth-child(n+3) .karta { border-top: 1px solid var(--linia); } } @media (max-width: 767.98px) { .bx-produkty .kontener { margin-top: -32px; } .bx-karty-produktow > li + li .karta { border-left: 0; border-top: 1px solid var(--linia); } } /* kalkulator: pełny pas granatu nocy, biała karta wyniku z bursztynową krawędzią */ .bx-kalkulator { padding: clamp(56px, 6vw, 80px) 0; background: var(--noc) radial-gradient(ellipse 60% 80% at 100% 0%, rgba(47, 111, 195, .35), transparent 70%); color: #fff; } .bx-kalkulator__panel { padding: 0; border: 0; background: none; } .bx-kalkulator__panel .bx-sekcja-naglowek h2 { color: #fff; } .bx-kalkulator__panel .bx-sekcja-naglowek p { color: #C9D6E8; } .bx-kalkulator__panel .kalkulator { gap: clamp(32px, 4vw, 64px); } .bx-kalkulator__panel .kalkulator__z-suwakiem > .kalkulator__pole > span:first-child { color: #fff; } .bx-kalkulator__panel .kalkulator__zakres { color: #A9BBD3; } .bx-kalkulator__panel .kalkulator__suwak { accent-color: var(--bursztyn); } .bx-kalkulator__panel .kalkulator__zalozenia { border-color: rgba(255, 255, 255, .16); } .bx-kalkulator__panel .kalkulator__zalozenia summary { color: #fff; } .bx-kalkulator__panel .kalkulator__zalozenia-tresc, .bx-kalkulator__panel .kalkulator__zalozenia-tresc .kalkulator__pole > span, .bx-kalkulator__panel .kalkulator__podpowiedz { color: #DDE6F2; } .bx-kalkulator__panel .kalkulator__wynik { padding: 32px; border-top: 4px solid var(--bursztyn); border-radius: 16px; background: #fff; color: var(--tekst); box-shadow: 0 24px 48px rgba(0, 0, 0, .25); } .bx-kalkulator__panel .kalkulator__wynik .kalkulator__etykieta { color: var(--tekst-slaby); font-size: 15px; letter-spacing: 0; text-transform: none; } .bx-kalkulator__panel .kalkulator__wynik .kalkulator__glowna { color: var(--granat); font-variant-numeric: tabular-nums; } .bx-kalkulator__panel .kalkulator__zalozenia-wyniku { background: var(--bursztyn-tlo); color: #5A3A06; } .bx-kalkulator__panel .kalkulator__wynik .kalkulator__przypis { color: var(--tekst-slaby); } /* etykieta wyniku zwykłą pisownią także na stronach kalkulatorów */ .kalkulator__wynik .kalkulator__etykieta { letter-spacing: 0; text-transform: none; font-size: 15px; } /* „Jak to działa?”: oś czasu - duże numery na linii, bez pudełek */ .bx-kroki { padding: clamp(64px, 6vw, 88px) 0 clamp(40px, 4vw, 56px); } .bx-kroki__lista { position: relative; gap: 40px; margin-top: 40px; } .bx-krok { padding: 0; border: 0; border-radius: 0; background: none; } .bx-krok__numer { position: relative; top: 0; left: 0; width: 56px; height: 56px; margin-bottom: 20px; background: var(--noc); color: var(--bursztyn); font-size: 24px; box-shadow: 0 0 0 8px #fff; z-index: 1; } .bx-krok__ikona { display: none; } .bx-krok__tytul { margin: 0 0 8px; font-size: 21px; } @media (min-width: 1200px) { .bx-kroki__lista::before { content: ""; position: absolute; top: 28px; left: 28px; right: 12%; height: 2px; background: linear-gradient(90deg, var(--granat), var(--akcent)); } .bx-krok:not(:last-child)::after { display: none; } } /* korzyści: tytuł z lewej, 2 x 2 po prawej, mocniejsze ikony */ .bx-zalety { padding: clamp(40px, 4vw, 56px) 0 clamp(56px, 6vw, 80px); } .bx-zalety__panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; align-items: start; padding: clamp(32px, 4vw, 56px); border-radius: 20px; } .bx-zalety__panel h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.12; } .bx-zalety__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } .bx-zalety__lista li { padding-left: 0; border-left: 0; } .bx-zalety__ikona .ikona-karty { background: var(--granat); color: #fff; } @media (max-width: 1199.98px) { .bx-zalety__panel { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767.98px) { .bx-zalety__lista { grid-template-columns: minmax(0, 1fr); } } .bx-kalkulator__panel .kalkulator__wynik > .kalkulator__glowna { background: #fff; } .bx-kalkulator__panel .kalkulator--blad .kalkulator__glowna { color: var(--tekst-slaby); } @media (min-width: 1200px) { .bx-kroki__lista::before { right: calc((100% - 120px) / 4 - 28px); } } /* bursztyn = wyróżnik serwisu: podkreślenia linków akcji, aktywna pozycja menu, znacznik grup */ .link-podkreslony { text-decoration-color: var(--bursztyn); text-decoration-thickness: 2px; } .nawigacja__przelacznik, .nawigacja__link { background-image: linear-gradient(var(--bursztyn), var(--bursztyn)); } .bx-hero__link-ikona { border-color: var(--bursztyn); color: var(--bursztyn); } .bx-tematy__tytul { color: var(--granat); font-size: 16px; letter-spacing: 0; text-transform: none; } .karta__etykieta { display: inline-flex; align-self: start; padding: 3px 10px; border-radius: 999px; background: var(--bursztyn-tlo); color: #6B4508; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; } .bx-zalety__ikona .ikona-karty { color: var(--bursztyn); } /* baza wiedzy na stronie głównej: karty ze zdjęciem, bursztynowa etykieta grupy */ .bx-wiedza { padding: clamp(56px, 6vw, 80px) 0; background: var(--tlo-sekcji); } .bx-wiedza .karty--zdjecia { gap: 24px; } .bx-wiedza .karta--zdjecie { gap: 10px; padding-bottom: 28px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(7, 31, 74, .06); transition: box-shadow .2s; } .bx-wiedza .karta--zdjecie:hover, .bx-wiedza .karta--zdjecie:focus-within { box-shadow: 0 16px 36px rgba(7, 31, 74, .14); } .bx-wiedza .karta__zdjecie { margin-bottom: 10px; transition: transform .4s ease; } .bx-wiedza .karta--zdjecie:hover .karta__zdjecie { transform: scale(1.03); } .bx-wiedza .karta__tytul { margin-top: 4px; margin-bottom: 0; font-size: 21px; line-height: 1.25; } .bx-wiedza .karta__opis { color: var(--tekst-slaby); } .bx-wiedza .bx-tematy a { background: #fff; } @media (prefers-reduced-motion: reduce) { .bx-wiedza .karta__zdjecie, .bx-karty-produktow .karta::before { transition: none; } } @media (max-width: 767.98px) { .bx-karty-produktow .karta__tytul br { display: none; } } /* ---------- ścieżka nauki (hub bazy wiedzy) ---------- */ .sciezka { padding: clamp(48px, 5vw, 72px) 0; background: var(--tlo-sekcji); border-bottom: 1px solid var(--linia); } .sciezka__naglowek { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: 40px; } .sciezka__naglowek h2 { margin: 0 0 10px; } .sciezka__wstep { max-width: 64ch; margin: 0; color: var(--tekst-slaby); font-size: 17px; } .sciezka__postep { display: grid; gap: 10px; min-width: 300px; padding: 20px 22px; border-radius: 14px; background: var(--noc); color: #fff; } .sciezka__postep[hidden] { display: none; } .sciezka__postep-tekst { margin: 0; font-weight: 600; } .sciezka__postep .przycisk { justify-content: center; } .sciezka__wyczysc { justify-self: start; padding: 4px 0; border: 0; background: none; color: #C9D6E8; font: 400 14px/1.3 var(--font-tresc); text-decoration: underline; cursor: pointer; } progress.sciezka__pasek { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .18); appearance: none; -webkit-appearance: none; } progress.sciezka__pasek::-webkit-progress-bar { background: rgba(255, 255, 255, .18); } progress.sciezka__pasek::-webkit-progress-value { background: var(--bursztyn); } progress.sciezka__pasek::-moz-progress-bar { background: var(--bursztyn); } .sciezka__poziomy { position: relative; display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; } .sciezka__poziom { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 48px; padding: 28px 28px 28px 92px; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(7, 31, 74, .06); } .sciezka__poziom:not(:last-child)::after { content: ""; position: absolute; left: 51px; top: 84px; bottom: -28px; width: 2px; background: linear-gradient(var(--granat), rgba(11, 46, 107, .15)); } .sciezka__numer { position: absolute; left: 24px; top: 26px; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--noc); color: var(--bursztyn); font: 700 24px/1 var(--font-naglowki); } .jest-ukonczony .sciezka__numer { background: var(--bursztyn); color: var(--noc); } .sciezka__nazwa { margin: 4px 0 8px; font-size: 22px; } .sciezka__opis { margin: 0 0 10px; color: var(--tekst); } .sciezka__meta { margin: 0; color: var(--tekst-slaby); font-size: 15px; } .sciezka__lista { margin: 0; padding: 0; list-style: none; counter-reset: art; } .sciezka__lista li { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--linia); } .sciezka__lista li:last-child { border-bottom: 0; } .sciezka__lista a { display: flex; flex: 1; align-items: center; gap: 12px; padding: 11px 0; color: var(--granat); font-weight: 500; text-decoration: none; } .sciezka__lista a:hover .sciezka__tytul { text-decoration: underline; text-decoration-color: var(--bursztyn); text-decoration-thickness: 2px; text-underline-offset: 4px; } .sciezka__znacznik { flex: none; width: 20px; height: 20px; border: 2px solid #B8C4D4; border-radius: 50%; } .jest-przeczytany .sciezka__znacznik { border-color: var(--bursztyn); background: var(--bursztyn) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23071F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .jest-przeczytany .sciezka__tytul { color: var(--tekst-slaby); } .sciezka__minuty { flex: none; color: var(--tekst-slaby); font-size: 14px; font-variant-numeric: tabular-nums; } .sciezka__uwaga { margin: 20px 0 0; color: var(--tekst-slaby); font-size: 14px; } @media (max-width: 991.98px) { .sciezka__naglowek { grid-template-columns: minmax(0, 1fr); } .sciezka__poziom { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 20px 84px; } .sciezka__numer { left: 18px; width: 48px; height: 48px; font-size: 20px; } .sciezka__poziom:not(:last-child)::after { left: 41px; top: 76px; } } @media (max-width: 575.98px) { .sciezka__poziom { padding: 20px 16px; } .sciezka__numer { position: static; margin-bottom: 4px; } .sciezka__poziom:not(:last-child)::after { display: none; } .sciezka__postep { min-width: 0; } } /* ---------- następny krok w ścieżce (artykuł) ---------- */ .sciezka-krok { margin-top: 40px; margin-bottom: 8px; } .sciezka-krok__ramka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; align-items: center; max-width: 960px; padding: 28px 32px; border-radius: 16px; background: var(--noc); color: #DDE6F2; } .sciezka-krok__poziom { margin: 0 0 4px; font-size: 15px; } .sciezka-krok__poziom strong { color: #fff; } .sciezka-krok__nr { margin: 0 0 10px; color: var(--bursztyn); font-weight: 600; font-size: 14px; } .sciezka-krok__dalej { position: relative; display: grid; gap: 4px; padding: 18px 56px 18px 20px; border-radius: 12px; background: #fff; color: var(--granat); text-decoration: none; transition: box-shadow .2s; } .sciezka-krok__dalej:hover, .sciezka-krok__dalej:focus-visible { box-shadow: 0 0 0 3px var(--bursztyn); } .sciezka-krok__dalej svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--akcent); } .sciezka-krok__etykieta { color: var(--tekst-slaby); font-size: 14px; font-weight: 600; } .sciezka-krok__tytul { font: 700 19px/1.3 var(--font-naglowki); } .sciezka-krok__minuty { color: var(--tekst-slaby); font-size: 14px; } .sciezka-krok__koniec { margin: 0; } .sciezka-krok__koniec a { color: #fff; } .sciezka-krok__cala { grid-column: 1 / -1; justify-self: start; color: #fff; font-size: 15px; text-decoration-color: var(--bursztyn); } @media (max-width: 767.98px) { .sciezka-krok__ramka { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } } .bx-wiedza__linki { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; } /* mega-menu: hierarchia - nagłówek grupy większy i mocniejszy niż pozycje */ @media (min-width: 1200px) { .panel__naglowek { color: var(--granat); font: 700 15px/1.4 var(--font-tresc); letter-spacing: 0; } .panel__linki a { color: var(--tekst); font: 400 15px/1.4 var(--font-tresc); } .panel__linki a:hover, .panel__linki a:focus-visible, .panel__linki a[aria-current] { color: var(--granat); } } /* mega-menu jak w PD / LS (2026-11-05): krótkie grupy 3 x 2 obok kafla; nagłówek grupy wersalikami w kolorze akcentu z linią */ @media (min-width: 1200px) { .panel__wnetrze:has(.panel__kafel) .panel__grupy, .panel__grupy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; } .panel__naglowek { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(47, 111, 195, .35); color: var(--akcent); font: 700 13px/1.3 var(--font-naglowki); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .panel__linki li + li { margin-top: 2px; } .panel__linki a { padding: 5px 10px; color: var(--tekst); font: 400 15px/1.4 var(--font-tresc); } .panel__tytul { margin-bottom: 18px; } .panel__wnetrze { padding-top: 28px; padding-bottom: 36px; } } /* ========================================================================= Podstrony w charakterze strony głównej (2026-11-05): granatowy nagłówek z obrazem, bursztyn jako wyróżnik w treści. ========================================================================= */ .naglowek-strony { background: var(--noc); color: #DDE6F2; } .naglowek-strony:not(.naglowek-strony--zdjecie)::after { content: none; } .naglowek-strony__tlo { position: absolute; inset: 0 0 0 auto; width: 52%; } .naglowek-strony__tlo img { width: 100%; height: 100%; object-fit: cover; } .naglowek-strony__tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--noc) 0%, rgba(7, 31, 74, .82) 30%, rgba(7, 31, 74, .35) 70%, rgba(7, 31, 74, .15) 100%); } .naglowek-strony__uklad { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(40px, 4.5vw, 64px); } .naglowek-strony h1 { color: #fff; } .naglowek-strony__lead { color: #DDE6F2; } .naglowek-strony .okruszki ol, .naglowek-strony .okruszki li + li::before { color: #A9BBD3; } .naglowek-strony .okruszki a { color: #fff; text-decoration-color: var(--bursztyn); } .naglowek-strony .metryka { color: #A9BBD3; } .naglowek-strony .metryka a { color: #fff; } .naglowek-strony .udostepnij { color: #A9BBD3; } .naglowek-strony .udostepnij a, .naglowek-strony .udostepnij button { border-color: rgba(255, 255, 255, .3); background: transparent; color: #fff; } .naglowek-strony .udostepnij a:hover, .naglowek-strony .udostepnij button:hover { border-color: var(--bursztyn); color: var(--bursztyn); } .naglowek-strony .zaufanie { color: #DDE6F2; } .naglowek-strony .zaufanie svg { color: var(--bursztyn); } .naglowek-strony .link-podkreslony { color: #fff; } .naglowek-strony .skroty a { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; } .naglowek-strony .skroty a:hover { border-color: var(--bursztyn); } .naglowek-strony .skroty__liczba { background: var(--bursztyn); color: var(--noc); } .naglowek-strony .etykieta { color: #DDE6F2; } @media (max-width: 767.98px) { .naglowek-strony__tlo { width: 100%; opacity: .35; } .naglowek-strony__tlo::after { background: linear-gradient(90deg, var(--noc) 0%, rgba(7, 31, 74, .7) 100%); } } /* treść: bursztyn jako wyróżnik */ .ramka--krotko { border-left: 4px solid var(--bursztyn); border-radius: 0 16px 16px 0; background: var(--bursztyn-tlo); } .ramka--krotko .ramka__tytul { color: #6B4508; } .ramka--krotko .ramka__tytul::before, .etykieta::before, .spis__tytul::before { background: var(--bursztyn); } .spis__liczba { background: var(--bursztyn-tlo); color: #6B4508; } .spis ol li::marker, .spis__numer { color: #B7791F; } .karta-cta { border: 0; border-left: 4px solid var(--bursztyn); border-radius: 0 14px 14px 0; background: var(--noc); } .karta-cta p { color: #C9D6E8; } .karta-cta .karta-cta__tytul { color: #fff; } .ramka--przyklad { border-left-color: var(--bursztyn); } /* tytuł sekcji: krótka bursztynowa kreska nad nagłówkiem */ .sekcja__naglowek h2::before, .sekcja__uklad > div > h2::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--bursztyn); } .naglowek-strony__tlo .fasada { display: block; width: 100%; height: 100%; } .naglowek-strony__tlo { width: 48%; } .naglowek-strony__tlo::after { background: linear-gradient(90deg, var(--noc) 0%, rgba(7, 31, 74, .7) 28%, rgba(7, 31, 74, .15) 70%, rgba(7, 31, 74, 0) 100%), linear-gradient(0deg, rgba(7, 31, 74, .55) 0%, rgba(7, 31, 74, 0) 40%); } /* okruszki bez podkreśleń (uwaga właściciela 2026-11-05) */ .okruszki a, .naglowek-strony .okruszki a { text-decoration: none; } .okruszki a:hover, .okruszki a:focus-visible { color: var(--bursztyn); } .okruszki a:hover { text-decoration: none; } /* ---------- nagłówek podstron: warianty do wyboru (a / b / c) ---------- */ /* wspólne: bursztynowa kreska nad tytułem */ .naglowek-strony h1::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 18px; border-radius: 2px; background: var(--bursztyn); } .naglowek-strony__zdjecie img { aspect-ratio: 16 / 11; border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, .28); } /* b: sam granat - poświata w prawym górnym rogu (błękit i ciepłe światło) */ .naglowek-strony--w-b { background: var(--noc) radial-gradient(ellipse 45% 90% at 100% 0%, rgba(47, 111, 195, .45), transparent 70%); } .naglowek-strony--w-b::before { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 169, 59, .16), transparent 65%); pointer-events: none; } /* a: granat + zdjęcie tematu w karcie (z bursztynową krawędzią) */ .naglowek-strony--w-a .naglowek-strony__zdjecie { position: relative; } .naglowek-strony--w-a .naglowek-strony__zdjecie::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -4px; height: 4px; border-radius: 0 0 4px 4px; background: var(--bursztyn); } /* c: jasny nagłówek + zdjęcie w karcie */ .naglowek-strony--w-c { background: var(--tlo-sekcji); color: var(--tekst); border-bottom: 1px solid var(--linia); } .naglowek-strony--w-c h1 { color: var(--granat); } .naglowek-strony--w-c .naglowek-strony__lead, .naglowek-strony--w-c .zaufanie { color: var(--tekst); } .naglowek-strony--w-c .okruszki ol, .naglowek-strony--w-c .okruszki li + li::before, .naglowek-strony--w-c .metryka, .naglowek-strony--w-c .udostepnij { color: var(--tekst-slaby); } .naglowek-strony--w-c .okruszki a, .naglowek-strony--w-c .metryka a, .naglowek-strony--w-c .link-podkreslony { color: var(--granat); } .naglowek-strony--w-c .udostepnij a, .naglowek-strony--w-c .udostepnij button { border-color: var(--linia); background: #fff; color: var(--granat); } .naglowek-strony--w-c .skroty a { border-color: var(--linia); background: #fff; color: var(--granat); } .naglowek-strony--w-c .zaufanie svg { color: #B7791F; } @media (max-width: 991.98px) { .naglowek-strony__zdjecie img { max-height: 240px; } } /* ---------- stopka jak w PD (2026-11-05) ---------- */ .stopka { padding: clamp(56px, 6vw, 72px) 0 36px; background: var(--noc); color: rgba(255, 255, 255, .62); font: 400 15px/1.5 var(--font-tresc); } .stopka a { color: rgba(255, 255, 255, .86); text-decoration: none; transition: color .15s; } .stopka a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--bursztyn); text-underline-offset: 4px; } .stopka__nawigacja { display: grid; grid-template-columns: repeat(4, max-content) minmax(0, 1fr); gap: 32px 56px; } .stopka__tytul { margin: 0 0 16px; color: var(--bursztyn); font: 700 13px/1.4 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; } .stopka .stopka__tytul a { color: inherit; } .stopka__linki { margin: 0; padding: 0; list-style: none; } .stopka__linki li + li { margin-top: 9px; } .stopka__pas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: end; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .14); } .stopka__logo { display: inline-block; line-height: 0; } .stopka__marka .stopka__opis { max-width: 52ch; margin: 18px 0 0; color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.6; } .stopka__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; } .stopka__akcje { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 32px; margin: 0 0 4px; padding: 0; list-style: none; } .stopka .stopka__akcje a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 700 13px/1.3 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .stopka__strzalka { flex: none; color: var(--bursztyn); transition: transform .15s; } .stopka__akcje a:hover .stopka__strzalka { transform: translateX(2px); } .stopka__kontakt { margin: 0; color: rgba(255, 255, 255, .86); } .stopka__etykieta { margin-right: 8px; color: var(--bursztyn); font: 700 13px/1.3 var(--font-naglowki); letter-spacing: .08em; text-transform: uppercase; } .stopka__prawne { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; } .stopka .stopka__prawne a, .stopka .stopka__link { color: rgba(255, 255, 255, .62); } .stopka .stopka__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } .stopka .stopka__link:hover { color: #fff; text-decoration: underline; } .stopka__prawa { margin: 0; color: rgba(255, 255, 255, .5); font: 500 12px/1.4 var(--font-naglowki); letter-spacing: .06em; text-transform: uppercase; } @media (max-width: 1199.98px) { .stopka__nawigacja { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .stopka__kolumna--polecane { grid-column: span 2; } .stopka__pas { grid-template-columns: minmax(0, 1fr); } .stopka__meta { align-items: flex-start; text-align: left; } .stopka__akcje, .stopka__prawne { justify-content: flex-start; } } @media (max-width: 767.98px) { .stopka__nawigacja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .stopka__kolumna--polecane { grid-column: 1 / -1; } .stopka__akcje { flex-direction: column; gap: 0; } .stopka .stopka__akcje a, .stopka__linki a, .stopka__prawne a { display: inline-block; padding: 6px 0; } .stopka__linki li + li { margin-top: 0; } } .stopka__prawne + .stopka__prawne { margin-top: -10px; } /* odstęp między wierszami 4 px; pas wyrównany do dołu - dolny wiersz zostaje, górny zjeżdża */ /* stopka: bez marginesów pozycji ze starej stopki (.stopka li { margin-bottom: 10px }) - odstępy tylko z gap */ .stopka__prawne li, .stopka__akcje li, .stopka__linki li { margin: 0; } .stopka__linki li + li { margin-top: 9px; } .stopka__prawne + .stopka__prawne { margin-top: -10px; } @media (max-width: 767.98px) { .stopka__linki li + li { margin-top: 0; } } /* stopka: linki akcji (Sprawdź oferty...) na wysokości górnej krawędzi plakietki logo */ .stopka__pas { align-items: start; } .stopka__akcje { margin-top: -2px; } /* stopka: prawa kolumna na pełną wysokość pasa - akcje u góry (przy logo), kontakt, linki prawne i copyright na dole (ostatni wiersz na wysokości ostatniego wiersza opisu pod logo) */ .stopka__pas { align-items: stretch; } .stopka__meta { height: 100%; } .stopka__meta > .stopka__akcje + * { margin-top: auto; } .stopka__marka .stopka__opis { margin-bottom: 0; } .stopka__prawa { line-height: 1.6; } @media (max-width: 1199.98px) { .stopka__meta > .stopka__akcje + * { margin-top: 0; } } .sciezka-krok__ramka { max-width: none; } /* na pełną szerokość kontenera (uwaga właściciela 2026-11-05) */ /* ---------- podstrony: rytm i akcenty jak na stronie głównej (2026-11-05) ---------- */ .sekcja { padding: clamp(44px, 4.5vw, 64px) 0; } .sekcja + .sekcja:not(.sekcja--szara):not([class*="sekcja--karty"]) { padding-top: clamp(36px, 3.5vw, 52px); } /* dolny pas CTA: granat nocy z bursztynową kreską, biały tytuł */ .pas-cta { background: var(--noc) radial-gradient(ellipse 50% 120% at 100% 0%, rgba(47, 111, 195, .4), transparent 70%); color: #DDE6F2; } .pas-cta::before { content: none; } .pas-cta__tytul { color: #fff; } .pas-cta__tytul::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 16px; border-radius: 2px; background: var(--bursztyn); } .pas-cta p { color: #C9D6E8; } /* kroki w treści (::: kroki): numer w granatowym kole z bursztynową cyfrą - jak „Jak to działa?” */ .ramka--kroki li::before { content: counter(krok); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--noc); color: var(--bursztyn); font: 700 19px/1 var(--font-naglowki); } .sekcja .ramka--kroki li, .wstep .ramka--kroki li { border-top: 0; padding-top: 0; } @media (max-width: 767.98px) { .ramka--kroki li::before { top: 0; font-size: 17px; width: 38px; height: 38px; } } /* suwaki kalkulatorów: bursztyn (jak na stronie głównej) */ .kalkulator__suwak { accent-color: var(--bursztyn); } /* pas CTA nad stopką: jaśniejszy granat marki (stopka = granat nocy), żeby się nie zlewały */ .pas-cta { background: var(--granat) radial-gradient(ellipse 45% 140% at 100% 0%, rgba(47, 111, 195, .55), transparent 70%); border-bottom: 1px solid rgba(255, 255, 255, .12); } /* ========================================================================= Ocena 2 (2026-11-05): typografia i skala, zasady koloru, moduły podstron produktowych. Kolory: granat = fundament; niebieski (--akcent) = działania, przyciski, linki; bursztyn = oznaczenia sekcji, aktywne suwaki, drobne wyróżniki - NIGDY kolor drobnego tekstu na białym tle. ========================================================================= */ body { font-size: 17px; line-height: 1.6; } .tresc p, .sekcja__tresc p, .sekcja li { font-size: 17px; line-height: 1.65; } h2 { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem); } h3 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); } /* hero strony głównej i nagłówki podstron: większy tytuł i lead */ .bx-hero__tytul { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem) !important; line-height: 1.08; } .bx-hero__lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem) !important; max-width: 52ch; } .naglowek-strony h1 { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.2rem); line-height: 1.1; } .naglowek-strony__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); } .zaufanie { font-size: 16px; gap: 10px 32px; } .okruszki ol { font-size: 15px; } .okruszki a:hover, .okruszki a:focus-visible { color: var(--akcent); } /* karty produktów: więcej miejsca */ .bx-karty-produktow .karta { padding: 30px 48px 32px 28px; column-gap: 18px; } .bx-karty-produktow .karta__tytul { font-size: 20px; } .bx-karty-produktow .karta__opis { font-size: 16px; } /* kalkulator: większe opisy i dane pomocnicze */ .bx-kalkulator__panel .bx-sekcja-naglowek p { font-size: 18px; } .kalkulator__zakres { font-size: 15px; } .kalkulator__zalozenia summary, .kalkulator__podpowiedz { font-size: 16px; } .kalkulator__wynik .kalkulator__przypis, .kalkulator__zalozenia-wyniku { font-size: 15px; } /* Jak to działa: większe numery, nagłówki i opisy */ .bx-krok__numer { width: 64px; height: 64px; font-size: 28px; } .bx-kroki__lista::before { top: 32px !important; left: 32px !important; } .bx-krok__tytul { font-size: 23px; } .bx-krok p { font-size: 17px; } /* Dlaczego Finaxio: tytuł nad listą, 4 kolumny - bez pustej lewej kolumny */ .bx-zalety__panel { grid-template-columns: minmax(0, 1fr); gap: 32px; } .bx-zalety__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .bx-zalety__lista h3 { font-size: 20px; } .bx-zalety__lista p { font-size: 17px; } @media (max-width: 1199.98px) { .bx-zalety__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .bx-zalety__lista { grid-template-columns: minmax(0, 1fr); } } /* karty (artykuły, rodzaje): większy tekst */ .karta__tytul { font-size: 20px; } .karta__opis { font-size: 16px; } /* stopka: większa typografia i odstępy */ .stopka { font-size: 16px; } .stopka__tytul { font-size: 14px; margin-bottom: 18px; } .stopka__linki li + li { margin-top: 11px; } .stopka__marka .stopka__opis, .stopka__prawne { font-size: 15px; } .stopka .stopka__akcje a, .stopka__etykieta { font-size: 14px; } /* ---------- moduły podstron produktowych ---------- */ /* sekcja z modułem (karty, tabela, checklista): nagłówek nad treścią, moduł na pełną szerokość - przerywa rytm „tytuł | tekst” */ .sekcja__uklad:has(.ramka--karty, .tabela, .ramka--checklista) { grid-template-columns: minmax(0, 1fr); gap: 20px; } .sekcja__uklad:has(.ramka--karty, .tabela, .ramka--checklista) > :last-child > p { max-width: 72ch; } /* karty zastosowań / bloków: tytuł pogrubiony w osobnym wierszu, bursztynowy znacznik, opcjonalne
*/ .sekcja .ramka--karty ul > li { position: relative; padding: 28px 26px 26px; border-radius: 16px; box-shadow: 0 2px 12px rgba(7, 31, 74, .05); font-size: 16px; line-height: 1.55; color: var(--tekst); } .sekcja .ramka--karty ul > li::before { content: ""; display: block; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 10px; background: var(--noc) no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5l3.6 3.6L15 4.6' fill='none' stroke='%23F0A93B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .sekcja .ramka--karty ul > li > strong:first-child { display: block; margin-bottom: 8px; color: var(--granat); font: 700 19px/1.3 var(--font-naglowki); } .sekcja .ramka--karty details { margin-top: 12px; border-top: 1px solid var(--linia); padding-top: 10px; } .sekcja .ramka--karty summary { color: var(--akcent); font-weight: 600; cursor: pointer; } .sekcja .ramka--karty details[open] summary { margin-bottom: 8px; } /* tabela porównawcza: większa, nagłówek granatowy */ .tabela table { font-size: 16px; } .tabela thead th { font-size: 15px; padding: 16px 20px; } /* checklista: lista z ptaszkami po lewej, przycisk po prawej (ostatni akapit z linkiem) */ .ramka--checklista { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--linia); border-left: 4px solid var(--bursztyn); border-radius: 0 16px 16px 0; background: #fff; } .ramka--checklista ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin: 0; padding: 0; list-style: none; } .ramka--checklista li { position: relative; margin: 0; padding-left: 32px; font-size: 16px; line-height: 1.5; } .ramka--checklista li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--akcent-tlo) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%230B2E6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .ramka--checklista > p { margin: 0; } .ramka--checklista > p:last-child a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: var(--promien); background: var(--cta); color: #fff; font: 600 17px/1 var(--font-naglowki); text-decoration: none; white-space: nowrap; } .ramka--checklista > p:last-child a:hover { background: var(--cta-hover); } @media (max-width: 991.98px) { .ramka--checklista { grid-template-columns: minmax(0, 1fr); } .ramka--checklista ul { grid-template-columns: minmax(0, 1fr); } } /* moduły: nadpisanie znaczników zwykłych list (.sekcja ul:not([class]) > li::before - kropka absolutna) */ .sekcja .ramka--karty ul:not([class]) > li { padding-left: 26px; } .sekcja .ramka--karty ul:not([class]) > li::before { position: static; display: block; width: 36px; height: 36px; margin: 0 0 16px; border-radius: 10px; background: var(--noc) no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5l3.6 3.6L15 4.6' fill='none' stroke='%23F0A93B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .sekcja .ramka--checklista ul:not([class]) > li { padding-left: 32px; } .sekcja .ramka--checklista ul:not([class]) > li::before { left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--akcent-tlo) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%230B2E6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ========================================================================= Ocena 3 (2026-11-05): dopracowanie - typografia, hero podstron, komponenty, CTA, FAQ, „Zobacz też”, tabele. ========================================================================= */ /* typografia: tekst podstawowy 17 px, pomocniczy min. 15 px, większy line-height w blokach */ .sekcja .ramka--karty ul > li, .ramka--checklista li, .karta__opis, .karta-cta p { font-size: 16px; line-height: 1.65; } .ramka p, .ramka li { line-height: 1.65; } .ramka__tytul, .etykieta, .metryka, .kalkulator__zakres { font-size: 15px; } .sekcja__tytul h2, .sekcja__naglowek h2 { font-weight: 700; letter-spacing: -0.02em; } /* hero podstron: większy H1, wyróżniki z ikoną w kółku, tekst i zdjęcie wyśrodkowane w pionie */ .naglowek-strony__uklad { align-items: center; } .naglowek-strony h1 { font-size: clamp(2.25rem, 1.55rem + 2.2vw, 3.4rem); font-weight: 700; letter-spacing: -0.025em; } .naglowek-strony__lead { color: var(--tekst); max-width: 56ch; } .naglowek-strony .zaufanie { gap: 12px 28px; margin-top: 26px; } .naglowek-strony .zaufanie li { color: var(--granat); font-weight: 500; font-size: 15.5px; } .naglowek-strony__zdjecie img { aspect-ratio: 4 / 3; object-fit: cover; } /* karty modułów: mocniejsze tytuły i ikony, więcej powietrza */ .sekcja .ramka--karty ul:not([class]) > li { padding: 32px 28px 30px; } .sekcja .ramka--karty ul:not([class]) > li::before { width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; background-size: 22px; } .sekcja .ramka--karty ul > li > strong:first-child { font-size: 20px; margin-bottom: 10px; } .sekcja .ramka--karty ul > li { transition: border-color .2s, box-shadow .2s; } .sekcja .ramka--karty ul > li:hover { border-color: #C9D6E8; box-shadow: 0 10px 28px rgba(7, 31, 74, .08); } /* tabele: jednolite - granatowy nagłówek, pierwsza kolumna jako etykieta, zebra, więcej powietrza */ .tabela th, .tabela td { padding: 18px 22px; line-height: 1.55; } .tabela tbody tr:nth-child(even) > * { background: #F7F9FC; } .tabela tbody td:first-child, .tabela tbody th { color: var(--granat); font-weight: 600; } /* CTA w treści: granat, wyraźna hierarchia, wyższy blok */ .karta-cta { padding: 30px 32px 30px 36px; gap: 20px 40px; } .karta-cta .karta-cta__tytul { color: #fff; font: 700 22px/1.3 var(--font-naglowki); margin-bottom: 6px; } .karta-cta p { color: #C9D6E8; } .karta-cta .przycisk { padding: 16px 30px; font-size: 17px; } /* pas CTA nad stopką: wyższy, większy tytuł */ .pas-cta { padding: clamp(52px, 5vw, 76px) 0; } .pas-cta__tytul { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; } .pas-cta p { font-size: 18px; } .pas-cta .przycisk { padding: 18px 34px; font-size: 17px; } /* FAQ: większe pytania, większy rytm */ .faq summary { padding: 26px 56px 26px 0; font-size: 20px; font-weight: 600; } .faq__odpowiedz { padding-bottom: 26px; font-size: 17px; line-height: 1.7; } .faq summary:hover { color: var(--akcent); } /* „Zobacz też” i siatki kart: równa wysokość, mocniejszy hover */ .karty > li { display: flex; } .karty > li > .karta { flex: 1 1 auto; } .karty--zdjecia .karta__tytul { font-size: 20px; } .karta { transition: transform .2s, box-shadow .2s, border-color .2s; } .karta:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(7, 31, 74, .12); border-color: #C9D6E8; } .karty--zdjecia .karta img { transition: transform .4s; } .karty--zdjecia .karta:hover img { transform: scale(1.04); } .przycisk { transition: background-color .2s, box-shadow .2s, transform .2s; } .przycisk:hover { box-shadow: 0 8px 20px rgba(47, 111, 195, .28); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .karta:hover, .przycisk:hover, .karty--zdjecia .karta:hover img { transform: none; } } /* tabele porównawcze na telefonie: każdy wiersz jako karta - etykieta wiersza u góry, wartości z nazwą kolumny (serwis.js: data-kolumna) */ @media (max-width: 639.98px) { .tabela { overflow: visible; border: 0; background: none; } .tabela table.tabela--karty, .tabela--karty tbody, .tabela--karty tr, .tabela--karty td, .tabela--karty th { display: block; width: auto; } .tabela--karty thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tabela--karty tbody tr { margin-bottom: 14px; border: 1px solid var(--linia); border-radius: 14px; background: #fff; overflow: hidden; } .tabela--karty tbody tr > * { padding: 12px 18px; border-bottom: 1px solid var(--linia); background: #fff !important; } .tabela--karty tbody tr > :first-child { background: var(--granat) !important; color: #fff; font-weight: 600; } .tabela--karty tbody tr > :first-child a { color: #fff; } .tabela--karty tbody tr > :last-child { border-bottom: 0; } .tabela--karty td[data-kolumna]::before { content: attr(data-kolumna); display: block; margin-bottom: 4px; color: var(--tekst-slaby); font-size: 14px; font-weight: 600; } } @media (max-width: 639.98px) { .tabela--karty tbody tr > * { width: auto !important; } } @media (max-width: 639.98px) { .tabela--karty tbody tr > * { position: static !important; max-width: none !important; min-width: 0 !important; } } /* kalkulator na granatowym panelu strony głównej: wybór rodzaju rat czytelny na ciemnym tle (audyt kontrastu 2026-11-05) */ .bx-kalkulator .kalkulator__wybor legend { color: #fff; } .bx-kalkulator .kalkulator__wybor label { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; } .bx-kalkulator .kalkulator__wybor label:has(input:checked) { border-color: var(--bursztyn); background: #fff; color: var(--granat); } .bx-kalkulator .kalkulator__wybor input { accent-color: var(--bursztyn); } /* ========================================================================= Ocena 4 (2026-11-05): proporcje i mikrotypografia; przykłady liczbowe; zastrzeżenie B2B. ========================================================================= */ /* hero strony głównej: wyższy o ok. 50 px (karty produktów nachodzą na dół) */ @media (min-width: 992px) { .bx-hero__uklad { padding-top: clamp(64px, 5.5vw, 88px); padding-bottom: clamp(104px, 8.5vw, 132px); } } /* karty produktów: więcej miejsca i większy opis */ .bx-karty-produktow .karta { padding: 32px 44px 34px 30px; } .bx-karty-produktow .karta__opis { font-size: 16.5px; line-height: 1.55; } /* sekcja kalkulatora: mniej ciemnego tła */ .bx-kalkulator { padding: clamp(44px, 4.5vw, 60px) 0 clamp(40px, 4vw, 52px); } .bx-kalkulator .kalkulator__zalozenia { margin-bottom: 0; } /* hero podstron: więcej miejsca na tekst, zdjęcie mniej dominuje */ @media (min-width: 992px) { .naglowek-strony--zdjecie .naglowek-strony__uklad { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 56px; } } /* przykład liczbowy: wyraźnie oddzielony - biała karta z bursztynowym paskiem, dopisek o charakterze danych */ .ramka--przyklad { margin: 36px 0; padding: 28px 32px; border: 1px solid var(--linia); border-left: 4px solid var(--bursztyn); border-radius: 0 16px 16px 0; background: #fff; box-shadow: 0 6px 20px rgba(7, 31, 74, .06); } .ramka--przyklad .ramka__tytul { color: var(--granat); font: 700 18px/1.35 var(--font-naglowki); } .ramka--przyklad p { font-size: 16.5px; } .ramka--przyklad::after { content: "Dane przykładowe - warunki konkretnego kredytu ustala bank."; display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linia); color: var(--tekst-slaby); font-size: 14px; } /* zastrzeżenie B2B: granatowy moduł */ .ramka--firmowe { padding: 28px 32px; border: 0; border-left: 4px solid var(--bursztyn); border-radius: 0 16px 16px 0; background: var(--noc); color: #DDE6F2; } .ramka--firmowe .ramka__tytul { color: #fff; font: 700 19px/1.35 var(--font-naglowki); } .ramka--firmowe .ramka__tytul::before { background: var(--bursztyn); } .ramka--firmowe p { color: #DDE6F2; } .ramka--firmowe a { color: #fff; } /* karty z własną ikoną ({ikona=...}, li.karta-ikona): bez ptaszka modułu - jedna ikona na kartę */ .sekcja .ramka--karty ul:not([class]) > li.karta-ikona::before, .sekcja .ramka--karty ul > li.karta-ikona::before { content: none; display: none; }