/* Krok 400 — arkusz bazy wiedzy. Ładowany PO style.css; podnosi prezentację stron edukacyjnych (hero, karty, diagramy, kroki) bez dotykania reszty aplikacji. Paleta spójna z aplikacją: #185fa5 (marka), #147a59 (ok), #a52f2e (wymóg), #d97706 (uwaga), #6b7480 (wyciszone). */ /* Zmienne bazy wiedzy DZIEDZICZĄ z brand.css — nie mają własnych wartości. Powód: strony wiedzy ładują trzy arkusze naraz (style.css + wiedza.css + brand.css), a każdy miał własną paletę. Efekt: te same pojęcia („marka", „ok", „uwaga") miały trzy różne odcienie w zależności od tego, który arkusz wygrał kaskadę. Teraz istnieje JEDNO źródło koloru (brand.css), a ten plik tylko nadaje mu lokalne nazwy. Zmiana palety = jedno miejsce. */ :root { --w-marka: var(--b-600); --w-marka-ciemna: var(--b-900); --w-ok: var(--a-600); --w-wymog: var(--n-600); --w-uwaga: var(--w-600); --w-mut: var(--t-400); --w-tlo-karty: var(--pow); --w-obrys: var(--linia); --w-cien: var(--c-1); --w-cien-hover: var(--c-2); } /* Tryb ciemny NIE jest tu powtarzany — zmienne wyżej wskazują na brand.css, który przełącza swoje wartości sam. Powielenie oznaczałoby dwa źródła prawdy i pewny rozjazd przy pierwszej zmianie palety. */ body.wiedza { max-width: 1060px; margin-top: 0; } /* ── Hero ─────────────────────────────────────────────────────────────── */ /* Hero na PEŁNĄ szerokość okna, tak jak na stronie głównej — inaczej strony wiedzy miały pasek nawigacji przez cały ekran i wcięty baner pod nim, co czytało się jak dwa różne szablony. `100vw` z wyśrodkowaniem przez ujemny margines wychodzi poza kolumnę tekstu, a `overflow-x: clip` na zabezpiecza przed poziomym paskiem przewijania (100vw liczy szerokość RAZEM z paskiem pionowym, więc bez tego zabezpieczenia potrafi wystawać o kilkanaście pikseli). */ .w-hero { background: linear-gradient(135deg, var(--w-marka-ciemna) 0%, var(--w-marka) 55%, var(--a-500) 130%); color: #fff; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 2rem; padding: 2.8rem 1.5rem 2.4rem; } /* Zabezpieczenie MUSI siedzieć na , nie na : poziome przewijanie dokumentu obsługuje element korzenia, więc `overflow-x` na go nie tłumi. Sprawdzone pomiarem — przy 1280 px okna i 15 px paska pionowego hero wystawał o te 15 px i dokument dawał się przesuwać w bok. */ html:has(body.wiedza) { overflow-x: clip; } body.wiedza { overflow-x: clip; } .w-hero-in { max-width: 1060px; margin: 0 auto; } .w-hero .w-crumb { font-size: .85rem; opacity: .85; margin: 0 0 1rem; } .w-hero .w-crumb a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); } .w-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 .5rem; color: #fff; } .w-hero .w-lead { font-size: clamp(.98rem, 1.8vw, 1.12rem); max-width: 46rem; opacity: .93; margin: 0; } .w-hero .w-meta { margin-top: 1.1rem; display: flex; gap: .5rem; flex-wrap: wrap; font-size: .8rem; } .w-hero .w-meta span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .18rem .7rem; backdrop-filter: blur(2px); } /* ── Pasek statystyk ──────────────────────────────────────────────────── */ .w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: -3.3rem auto 2.4rem; max-width: 1060px; position: relative; } .w-stat { background: var(--w-tlo-karty); border: 1px solid var(--w-obrys); border-radius: 12px; box-shadow: var(--w-cien); padding: .9rem 1rem; text-align: center; } .w-stat b { display: block; font-size: 1.45rem; color: var(--w-marka); } .w-stat span { font-size: .8rem; color: var(--w-mut); } /* ── Nagłówki sekcji ──────────────────────────────────────────────────── */ .w-sekcja { display: flex; align-items: baseline; gap: .7rem; margin: 2.6rem 0 1.1rem; } .w-sekcja h2 { font-size: 1.35rem; margin: 0; } .w-sekcja::after { content: ""; flex: 1; height: 1px; background: var(--w-obrys); } .w-sekcja .w-nr { font-size: .78rem; font-weight: 700; color: var(--w-marka); border: 1.5px solid var(--w-marka); border-radius: 999px; padding: .1rem .6rem; white-space: nowrap; } /* ── Siatka kart ──────────────────────────────────────────────────────── */ .w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; } .w-karta { position: relative; display: flex; flex-direction: column; gap: .45rem; background: var(--w-tlo-karty); border: 1px solid var(--w-obrys); border-radius: 14px; box-shadow: var(--w-cien); padding: 1.15rem 1.2rem 1rem; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; } .w-karta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--w-akcent, var(--w-marka)); } .w-karta:hover { transform: translateY(-3px); box-shadow: var(--w-cien-hover); } .w-karta.akc-wymog { --w-akcent: var(--w-wymog); } .w-karta.akc-ok { --w-akcent: var(--w-ok); } .w-karta.akc-uwaga { --w-akcent: var(--w-uwaga); } /* Ikony liniowe SVG zamiast emoji — te same kształty i grubość kreski co na stronie głównej. Emoji renderują się inaczej na każdym systemie (inny styl, inna waga, czasem kolor), więc nigdy nie dawały spójnego zestawu. */ .w-ikona { width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--w-akcent, var(--w-marka)) 12%, transparent); color: var(--w-akcent, var(--w-marka)); } .w-svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .w-karta h3 { margin: .1rem 0 0; font-size: 1.06rem; line-height: 1.3; } .w-karta h3 a { color: inherit; text-decoration: none; } .w-karta h3 a::after { content: ""; position: absolute; inset: 0; } /* cała karta klika */ .w-karta p { margin: 0; font-size: .9rem; color: inherit; opacity: .85; flex: 1; } .w-karta .w-stopka-karty { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; font-size: .74rem; color: var(--w-mut); margin-top: .35rem; } /* ── Tagi ─────────────────────────────────────────────────────────────── */ .w-tag { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .13rem .6rem; border: 1px solid; } .w-tag.wymog { color: var(--w-wymog); border-color: color-mix(in srgb, var(--w-wymog) 45%, transparent); background: color-mix(in srgb, var(--w-wymog) 8%, transparent); } .w-tag.praktyka { color: var(--w-ok); border-color: color-mix(in srgb, var(--w-ok) 45%, transparent); background: color-mix(in srgb, var(--w-ok) 8%, transparent); } .w-tag.system { color: var(--w-marka); border-color: color-mix(in srgb, var(--w-marka) 45%, transparent); background: color-mix(in srgb, var(--w-marka) 8%, transparent); } /* ── Artykuł: kroki, wyróżnienia, tabele ──────────────────────────────── */ .w-art { max-width: 860px; } .w-art h2 { font-size: 1.3rem; margin-top: 2.4rem; padding-bottom: .35rem; border-bottom: 2px solid color-mix(in srgb, var(--w-marka) 25%, transparent); } .w-krok { display: flex; gap: 1rem; margin: 1.35rem 0; } .w-krok .w-kula { flex: 0 0 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--w-marka); color: #fff; font-weight: 700; font-size: 1.05rem; box-shadow: 0 3px 8px color-mix(in srgb, var(--w-marka) 35%, transparent); } .w-krok > div h3 { margin: .2rem 0 .4rem; font-size: 1.05rem; } .w-krok > div p { margin: .3rem 0; } .w-callout { border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0; font-size: .93rem; border: 1px solid; } .w-callout.uwaga { border-color: color-mix(in srgb, var(--w-uwaga) 45%, transparent); background: color-mix(in srgb, var(--w-uwaga) 7%, transparent); } .w-callout.ok { border-color: color-mix(in srgb, var(--w-ok) 45%, transparent); background: color-mix(in srgb, var(--w-ok) 7%, transparent); } .w-callout b:first-child { display: inline-block; margin-bottom: .15rem; } .w-art table { width: 100%; border-collapse: collapse; margin: .9rem 0 1.3rem; font-size: .92rem; } .w-art th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--w-mut); padding: .45rem .7rem; border-bottom: 2px solid var(--w-obrys); } .w-art td { padding: .55rem .7rem; border-bottom: 1px solid var(--w-obrys); vertical-align: top; } .w-art tr:last-child td { border-bottom: none; } /* ── Diagramy / kafle celów ───────────────────────────────────────────── */ .w-cele { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin: 1rem 0 1.4rem; } .w-cel { border: 1px solid var(--w-obrys); border-radius: 10px; padding: .7rem .8rem; text-align: center; background: var(--w-tlo-karty); box-shadow: var(--w-cien); } .w-cel .w-emoji { font-size: 1.5rem; display: block; margin-bottom: .3rem; } .w-cel b { font-size: .84rem; line-height: 1.25; display: block; } .w-flow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; margin: 1.1rem 0 1.4rem; } .w-flow .w-fkrok { flex: 1 1 150px; border: 1.5px solid var(--w-marka); border-radius: 10px; padding: .6rem .7rem; font-size: .85rem; background: color-mix(in srgb, var(--w-marka) 5%, transparent); position: relative; } .w-flow .w-fkrok b { display: block; color: var(--w-marka); margin-bottom: .15rem; } .w-flow .w-strzalka { align-self: center; color: var(--w-mut); font-size: 1.2rem; } .w-kpi { display: grid; gap: .55rem; margin: 1rem 0 1.4rem; } .w-kpi .w-pasek { display: grid; grid-template-columns: 5.5rem 1fr; gap: .7rem; align-items: center; } .w-kpi .w-pasek b { font-size: .9rem; text-align: right; } .w-kpi .w-slupek { height: 1.5rem; border-radius: 6px; background: linear-gradient(90deg, var(--w-ok), color-mix(in srgb, var(--w-ok) 55%, #fff)); display: flex; align-items: center; padding: 0 .6rem; color: #fff; font-size: .78rem; font-weight: 600; } /* ── Oś czasu (CBAM) ──────────────────────────────────────────────────── */ .w-os { position: relative; margin: 1.3rem 0 1.6rem; padding-left: 1.4rem; } .w-os::before { content: ""; position: absolute; left: .45rem; top: .3rem; bottom: .3rem; width: 3px; border-radius: 2px; background: linear-gradient(var(--w-mut), var(--w-marka), var(--w-ok)); } .w-os .w-punkt { position: relative; margin: 0 0 1.05rem; } .w-os .w-punkt::before { content: ""; position: absolute; left: -1.32rem; top: .3rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--w-marka); box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-marka) 25%, transparent); } .w-os .w-punkt.przeszly::before { background: var(--w-mut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-mut) 25%, transparent); } .w-os .w-punkt.przyszly::before { background: var(--w-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-ok) 25%, transparent); } .w-os b.w-data { display: inline-block; font-size: .8rem; color: var(--w-marka); background: color-mix(in srgb, var(--w-marka) 9%, transparent); border-radius: 6px; padding: .05rem .5rem; margin-bottom: .15rem; } .w-os .w-punkt.przeszly b.w-data { color: var(--w-mut); background: color-mix(in srgb, var(--w-mut) 12%, transparent); } .w-os .w-punkt.przyszly b.w-data { color: var(--w-ok); background: color-mix(in srgb, var(--w-ok) 10%, transparent); } .w-os p { margin: .1rem 0 0; font-size: .92rem; } /* ── Słownik ──────────────────────────────────────────────────────────── */ .w-szukaj { position: sticky; top: 0; z-index: 5; background: inherit; padding: .6rem 0 .8rem; } .w-szukaj input { font-size: 1rem; padding: .65rem .9rem; border-radius: 10px; border: 1.5px solid var(--w-obrys); box-shadow: var(--w-cien); } .w-szukaj input:focus { outline: none; border-color: var(--w-marka); } .w-haslo { background: var(--w-tlo-karty); border: 1px solid var(--w-obrys); border-radius: 10px; padding: .7rem .95rem; margin: .55rem 0; box-shadow: var(--w-cien); } .w-haslo dt { font-weight: 700; font-size: 1rem; margin: 0; } .w-haslo dd { margin: .25rem 0 0; font-size: .92rem; opacity: .88; } .w-brak { display: none; color: var(--w-mut); font-size: .95rem; margin: 1.2rem 0; } /* ── Stopka artykułów ─────────────────────────────────────────────────── */ .w-stopka { margin-top: 3rem; padding-top: 1.1rem; border-top: 1px dashed var(--w-obrys); font-size: .85rem; color: var(--w-mut); display: flex; gap: .9rem; flex-wrap: wrap; } .w-nastepny { display: block; margin-top: 1.6rem; border: 1.5px solid var(--w-marka); border-radius: 12px; padding: .85rem 1.1rem; text-decoration: none; box-shadow: var(--w-cien); transition: transform .15s ease, box-shadow .15s ease; } .w-nastepny:hover { transform: translateY(-2px); box-shadow: var(--w-cien-hover); } .w-nastepny small { display: block; color: var(--w-mut); font-size: .78rem; margin-bottom: .1rem; } .w-nastepny b { color: var(--w-marka); } @media (max-width: 640px) { .w-stats { margin-top: -2.6rem; } .w-krok { gap: .7rem; } } /* ── Artykuł: cytaty, kod, spis treści (iteracja 2 redesignu) ─────────── */ /* Dotąd vsme-instrukcja i edukacja definiowały to we własnych blokach