/* Układ okresowy — style sekcji /uklad-okresowy/. Wszystko pod prefiksem .uo-, żeby nie kolidowało z motywem NKML (.nkml-*). WAŻNE: na stronie hubu obok tych stylów działa aplikacja Mateusza, która ma własny system trzech motywów sterowany atrybutem [data-motyw] na . Dlatego kolory biorę Z JEJ ZMIENNYCH (--tlo, --tekst, --linia, --akcent), a własne wartości podaję tylko jako zapas dla podstron, gdzie tamten CSS się nie ładuje. Dzięki temu dolna część hubu przełącza motyw razem z tablicą, zamiast zostawać w swoim kolorze. */ :root{ --uo-tlo:#fff; --uo-tekst:#1a1d21; --uo-slaby:#667085; --uo-linia:#e4e7ec; --uo-akcent:#1f3864; --uo-akcent2:#2e5c8a; } @media (prefers-color-scheme:dark){:root{ --uo-tlo:#161a1e; --uo-tekst:#e8eaed; --uo-slaby:#9aa2ad; --uo-linia:#2c3238; --uo-akcent:#8ab4f8; --uo-akcent2:#6ea8fe; }} .uo-main,.uo-okruchy{ --uo-tlo:var(--tlo2,var(--tlo,#fff)); --uo-tekst:var(--tekst,#1a1d21); /* --tekst3 jest za jasny na jasnym tle: nagłówki tabel miały kontrast 2,93 przy normie WCAG 4,5. Bierzemy ciemniejszy --tekst2. */ --uo-slaby:var(--tekst2,#667085); --uo-linia:var(--linia,#e4e7ec); --uo-akcent:var(--akcent,#1f3864); /* --akcent w motywie jasnym dawał linkom kontrast 2,25 — własny, ciemniejszy granat dla jasnego motywu, a w ciemnym zostaje jasny akcent aplikacji. */ --uo-akcent2:#17416e; } [data-motyw="ciemny"] .uo-main,[data-motyw="ciemny"] .uo-okruchy{ --uo-akcent2:var(--akcent,#6ea8fe); } @media (prefers-color-scheme:dark){ [data-motyw="auto"] .uo-main,[data-motyw="auto"] .uo-okruchy{ --uo-akcent2:var(--akcent,#6ea8fe); } } .uo-main{max-width:1180px;margin:0 auto;padding:18px 16px 48px;color:var(--uo-tekst)} .uo-main h1{font-size:clamp(24px,3.4vw,34px);line-height:1.15;margin:6px 0 14px;letter-spacing:-.02em} .uo-main h2{font-size:clamp(18px,2.2vw,23px);margin:26px 0 10px;letter-spacing:-.01em} .uo-lead{font-size:17px;line-height:1.6;color:var(--uo-tekst);margin:0 0 18px;max-width:72ch} .uo-main p{line-height:1.65;max-width:78ch} .uo-okruchy{font-size:12.5px;color:var(--uo-slaby);margin:0 0 4px} .uo-okruchy a{color:var(--uo-akcent2);text-decoration:none} .uo-okruchy a:hover{text-decoration:underline} /* ── siatka 18 kolumn ── */ .uo-siatka-otocz{overflow-x:auto;padding-bottom:8px;margin:0 0 10px} .uo-siatka{display:grid;grid-template-columns:repeat(18,minmax(46px,1fr)); gap:3px;min-width:900px} .uo-k{display:flex;flex-direction:column;justify-content:center;align-items:center; aspect-ratio:1/1;border-radius:5px;text-decoration:none;padding:2px; border:1px solid rgba(0,0,0,.08);color:#1a1d21;transition:transform .1s} .uo-k:hover{transform:scale(1.14);z-index:5;box-shadow:0 3px 10px rgba(0,0,0,.22)} .uo-k b{font-size:9px;font-weight:500;opacity:.7;line-height:1} .uo-k i{font-size:16px;font-weight:700;font-style:normal;line-height:1.15} .uo-k span{font-size:7.5px;text-align:center;line-height:1;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;max-width:100%;opacity:.85} .uo-akt{outline:3px solid var(--uo-akcent);outline-offset:1px} /* kolory kategorii — czytelne w druku i na ekranie */ .k-niemetal{background:#d8f3dc}.k-szlachetny{background:#e0e7ff} .k-alkaliczny{background:#ffe4e1}.k-ziem-alk{background:#ffe8cc} .k-polmetal{background:#e6f0d4}.k-halogen{background:#fff3bf} .k-poprzejsciowy{background:#dee2e6}.k-przejsciowy{background:#d0ebff} .k-lantanowiec{background:#f3d9fa}.k-aktynowiec{background:#fcc2d7} .k-nieznany{background:#f1f3f5} .uo-legenda{display:flex;flex-wrap:wrap;gap:7px 14px;font-size:11.5px; color:var(--uo-slaby);margin:0 0 22px} .uo-leg{display:flex;align-items:center;gap:5px} .uo-leg i{width:12px;height:12px;border-radius:3px;display:inline-block; border:1px solid rgba(0,0,0,.12)} /* ── kafle ── */ .uo-kafle{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px;margin:14px 0} .uo-kafel{display:block;padding:12px 14px;border:1px solid var(--uo-linia);border-radius:9px; text-decoration:none;color:var(--uo-tekst);background:var(--uo-tlo);transition:.12s} .uo-kafel:hover{border-color:var(--uo-akcent2);transform:translateY(-1px)} .uo-kafel b{display:block;font-size:15px;margin-bottom:3px;color:var(--uo-akcent2)} .uo-kafel span{font-size:12.5px;color:var(--uo-slaby);line-height:1.4} /* ── tabele ── */ .uo-tab-otocz{overflow-x:auto;margin:12px 0 18px} .uo-dane{border-collapse:collapse;width:100%;font-size:14px;min-width:520px} .uo-dane th,.uo-dane td{padding:7px 11px;border-bottom:1px solid var(--uo-linia);text-align:left} .uo-dane th{font-weight:600;color:var(--uo-slaby);white-space:nowrap;width:36%} .uo-lista th{width:auto;background:var(--uo-linia);color:var(--uo-tekst); position:sticky;top:0} .uo-lista td:first-child{color:var(--uo-slaby);font-variant-numeric:tabular-nums} .uo-dane a{color:var(--uo-akcent2);text-decoration:none;font-weight:500} .uo-dane a:hover{text-decoration:underline} .nz{color:var(--uo-slaby);font-style:italic;font-size:13px} /* ── sekcje, FAQ, nawigacja ── */ .uo-sek{margin:22px 0} .uo-flagi{display:inline-block;font-size:12.5px;background:#fff3bf;color:#7a5a00; padding:4px 11px;border-radius:14px;margin:0 0 8px} .uo-faq{border:1px solid var(--uo-linia);border-radius:8px;padding:9px 13px;margin:7px 0} .uo-faq summary{cursor:pointer;font-weight:600;font-size:14.5px} .uo-faq p{margin:8px 0 2px;font-size:14px;color:var(--uo-tekst)} .uo-sasiedzi{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; margin:26px 0 12px;padding-top:14px;border-top:1px solid var(--uo-linia)} .uo-sasiedzi a{color:var(--uo-akcent2);text-decoration:none;font-size:14px} .uo-sasiedzi a:hover{text-decoration:underline} .uo-powrot{font-size:13.5px;color:var(--uo-slaby);margin-top:18px} .uo-powrot a{color:var(--uo-akcent2);text-decoration:none} .uo-alfa{line-height:2;font-size:14px} .uo-alfa a{color:var(--uo-akcent2);text-decoration:none;white-space:nowrap} @media(max-width:760px){ .uo-siatka{grid-template-columns:repeat(18,44px);min-width:0} .uo-k span{display:none} .uo-k i{font-size:14px} } @media print{ .nkml-site-header,.nkml-site-footer,.uo-okruchy,.uo-kafle,.uo-sasiedzi, .uo-powrot,.uo-faq{display:none!important} .uo-siatka{min-width:0;gap:2px} .uo-k{border:1px solid #999} .uo-main{max-width:none;padding:0} @page{size:A4 landscape;margin:8mm} } .uo-ciek{margin:8px 0 0;padding-left:20px} .uo-ciek li{margin:5px 0;line-height:1.6;max-width:76ch} .uo-pobierz{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:14px 0} .uo-plik{display:block;padding:13px 15px;border:1px solid var(--uo-linia);border-radius:9px; text-decoration:none;color:var(--uo-tekst);background:var(--uo-tlo);transition:.12s} .uo-plik:hover{border-color:var(--uo-akcent2);transform:translateY(-1px)} .uo-plik b{display:block;font-size:15px;margin-bottom:4px;color:var(--uo-akcent2)} .uo-plik span{display:block;font-size:12.5px;color:var(--uo-slaby);line-height:1.45} .uo-plik em{display:block;font-size:11px;color:var(--uo-slaby);font-style:normal;margin-top:6px; padding-top:6px;border-top:1px solid var(--uo-linia)} @media print{.uo-pobierz{display:none!important}} /* Sekcja doklejona pod interaktywną tablicą na hubie */ .uo-okruchy-app{max-width:1180px;margin:0 auto;padding:10px 16px 0} .uo-po-app{margin-top:0!important;padding-top:22px;border-top:1px solid var(--uo-linia)} /* Linki w prozie nie miały własnej reguły — brały kolor z motywu i w wersji jasnej wychodziły z kontrastem 2,25 przy normie WCAG 4,5. */ .uo-main p a,.uo-sek p a,.uo-sek li a,.uo-ciek a,.uo-faq a{ color:var(--uo-akcent2); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } .uo-main p a:hover,.uo-sek p a:hover{text-decoration-thickness:2px}