/* ============================================================================ Nawigator Dotacji — DESIGN SYSTEM (ds.css) Jedno źródło prawdy dla wyglądu: tokeny (kolory navy/gold, typografia, odstępy, promienie, cienie) + referencyjne komponenty (.ds-*). Ładowany w KAŻDEJ strony PRZED jej stylami inline — strony mogą więc nadpisać cokolwiek lokalnie (bez regresji), a wspólne tokeny mają w jednym miejscu. Style-guide: docs/STYLEGUIDE.md ========================================================================== */ :root { /* — Marka: granat (navy) — */ --navy-950:#071A2F; --navy-900:#0B2545; --navy-800:#12365F; --navy-700:#1B4B7A; --navy-600:#2563A6; /* — Tła i powierzchnie — */ --bg:#F6F8FB; --bg-alt:#EEF3F8; --surface:#fff; --surface-subtle:#F9FAFC; --card:#fff; /* alias powierzchni karty (zgodność z Doradcą) */ /* — Linie / obramowania — */ --border:#D7E0EA; --border-strong:#AEBECD; /* — Tekst — */ --text:#111827; --muted:#4B5563; --subtle:#6B7280; /* — Akcent: NIEBIESKI (redesign 2026-06; było złoto). Jeden akcent w całym serwisie. — */ --cta:#2563EB; --cta-hover:#1D4FD7; --cta-soft:#EAF1FE; --gold:#2563EB; /* dawniej złoto — zmapowane na niebieski, by stare użycia też były spójne */ /* — Kolory stanu naboru (pigułki pilności) — */ --open:#167A55; --open-bg:#E8F6F0; /* otwarty */ --soon:#2F6B9A; --soon-bg:#EAF3FA; /* wkrótce */ --future:#7A5AB0; --future-bg:#F0EAF8; /* planowany */ --closed:#6B7280; --closed-bg:#F1F3F5; /* zamknięty */ /* aliasy używane przez Doradcę (te same role, inne nazwy) */ --ok:#167A55; --ok-bg:#E7F4EE; --warn:#B9770E; --warn-bg:#FBF1DF; --unlock:#6D28A3; --unlock-bg:#F1E9F8; /* — Typografia — */ --font-ui:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif; /* — Skala odstępów (4px) — */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; /* — Promienie — */ --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px; /* — Cienie — */ --sh-1:0 1px 3px rgba(11,37,69,.06); --sh-2:0 4px 14px rgba(11,37,69,.10); --sh-3:0 12px 40px rgba(7,26,47,.35); /* — Layout — */ --maxw:1080px; --touch:44px; /* minimalny cel dotykowy (WCAG) */ } /* === trust-signals === */ .ts-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px; margin:8px 0 0;padding-top:7px;border-top:1px solid var(--border); font-size:11.5px;color:var(--subtle)} .ts-link{color:var(--navy-500);text-decoration:none;font-weight:500;white-space:nowrap} .ts-link:hover{text-decoration:underline;color:var(--navy-700)} .ts-date{white-space:nowrap} .ts-sep{color:var(--border-strong);user-select:none} .ts-conf{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .ts-conf-bar{display:inline-block;width:36px;height:5px;border-radius:3px; background:var(--border-strong);vertical-align:middle;overflow:hidden;position:relative} .ts-conf-bar i{display:block;height:100%;border-radius:3px;background:var(--open)} .ts-conf-bar.med i{background:var(--soon)} .ts-conf-bar.low i{background:var(--closed)} /* === a11y === */ /* Skip-link — ukryty, pojawia się przy fokusie klawiatury */ .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:-1; font:700 15px var(--font-ui,"IBM Plex Sans",system-ui,sans-serif);text-decoration:none;color:#fff} .skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;padding:10px 20px; background:#0B2545;color:#fff;border-radius:8px;z-index:10000; outline:3px solid #fff;outline-offset:2px} /* Klasa pomocnicza: tekst tylko dla czytników ekranu */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Focus-visible: wyraźny pierścień dla nawigacji klawiaturą */ :focus-visible{outline:2px solid #2563EB;outline-offset:2px} a:focus-visible,button:focus-visible, [role="button"]:focus-visible,[tabindex="0"]:focus-visible{ outline:2px solid #2563EB;outline-offset:3px;border-radius:4px} /* Pola mają własny focus ring (border + box-shadow) — nie duplikujemy outline */ input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none} /* === empty-states === */ .es{text-align:center;padding:32px 20px;background:var(--bg-alt); border:1px dashed var(--border-strong);border-radius:var(--r-lg)} .es-icon{font-size:38px;margin:0 0 11px;display:block;line-height:1} .es-title{font-size:17px;font-weight:700;color:var(--navy-900);margin:0 0 7px; font-family:"Archivo",system-ui,sans-serif} .es-body{font-size:14.5px;color:var(--muted);margin:0 auto 16px;max-width:44ch;line-height:1.5} .es-hint{font-size:13px;color:var(--subtle)} .es-action{display:inline-block;padding:10px 20px;border:none;border-radius:var(--r-md); background:var(--cta);color:#fff;font:600 14px var(--font-ui);cursor:pointer; text-decoration:none;transition:background .12s} .es-action:hover{background:var(--cta-hover)} /* doradca — onboarding: karty startowych sytuacji */ .es-scenarios-label{font-size:14.5px;color:var(--muted);margin:0 0 10px} .scenarios{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .scenario{padding:10px 14px;border:1.5px solid var(--border-strong);border-radius:10px; background:#fff;font:inherit;font-size:14px;cursor:pointer;text-align:left; color:var(--navy-900);transition:border-color .12s,background .12s,color .12s;line-height:1.3} .scenario:hover{border-color:var(--cta);background:var(--cta-soft);color:var(--cta)} .scenario.sel{border-color:var(--navy-700);background:var(--navy-900);color:#fff;font-weight:600} /* === vitals === (Core Web Vitals — nowe reguły tu, bez modyfikowania istniejących) */