/* ==========================================================================
EPPWR — arkusz główny
Tokeny z makiety v4, akcent przeniesiony z żółtego na niebieski #2E6BEF.
Zasada nadrzędna zmieniona względem poprzedniej wersji: rozdziela odstęp
i promień, nie linia. Bloki są kartami leżącymi na płótnie, a nie pasami
ciągnącymi się od krawędzi do krawędzi.
Trzy warstwy tła, od najciemniejszej: płótno strony, wnętrze ramy, karta.
Element, który ma coś znaczyć, jest o warstwę jaśniejszy od otoczenia —
nie obrysowany.
========================================================================== */
/* Inter jako font zmienny — jeden plik obsługuje wszystkie wagi.
IBM Plex Mono w subsecie latin-ext; jeśli wgrany plik jest tylko "latin",
polskie znaki polecą na font zapasowy. Patrz fonty/CZYTAJ.txt. */
@font-face {
font-family: 'Inter';
src: url('fonty/InterVariable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Plex';
src: url('fonty/IBMPlexMono-Regular.woff2') format('woff2');
font-weight: 400; font-display: swap;
}
@font-face {
font-family: 'Plex';
src: url('fonty/IBMPlexMono-Medium.woff2') format('woff2');
font-weight: 500; font-display: swap;
}
:root {
--atrament: #16181C;
--wtorny: #7C817F;
/* Do etykiet i nawigacji: #7C817F przy 10 px wersalikami czyta się za
słabo. Ten odcień daje 8,9 : 1 zamiast 4,6 : 1. */
--wtorny-mocny: #4A4F4C;
/* Trzy warstwy tła. Karta leży na wnętrzu ramy, rama na płótnie. */
--bialy: #FFFFFF; /* karta */
--tlo: #F4F3EF; /* wnętrze ramy, pola formularzy */
--tlo-2: #E9E8E3; /* płótno strony */
/* Linie zostały, ale zeszły do roli podziału wewnątrz karty.
Rozdzielaniem bloków zajmuje się teraz odstęp. */
--linia: #E4E2DC;
--linia-2: #F0EEE9;
/* ---- Akcent ----
Makieta miała żółty #EFE34A. Niebieski jest ciemniejszy, więc nie da się
go użyć zamiennie: biały tekst na nim czyta się dobrze (4,7 : 1), ale
sam akcent na czarnym bloku już nie (3,8 : 1). Stąd osobny jaśniejszy
wariant do ciemnych tł — tam, gdzie w makiecie żółty stał na czerni. */
--akcent: #2E6BEF;
--akcent-mocny: #1E4FC4; /* najechanie, wciśnięcie */
--akcent-jasny: #8FB4FF; /* tekst i ikony na ciemnym tle, 8,6 : 1 */
--akcent-tlo: #EEF3FE;
--akcent-linia: #D3E0FC;
--zielen: #1D6B4A;
--zielen-tlo: #EDF5F0;
--zielen-linia:#C2DCCE;
--zielen-ciemna:#3C6B57;
--zielen-mocna: #14523A;
--legenda: #F9F3E1;
--bursztyn: #9A6B12;
--bursztyn-tlo: #FDF8EE;
--bursztyn-pas: #F7E9CC;
--bursztyn-linia:#E6D0A4;
--bursztyn-ciemny:#7A5410;
--rdza: #B0431E;
--rdza-tlo: #FDF2ED;
--rdza-pas: #F7DFD6;
--rdza-linia:#E8C4B6;
--rdza-ciemna:#8A3417;
--drewno: #A8763F;
--stal: #8B949A;
--aluminium: #B3BCC1;
--papier: #C9B896;
--tworzywo: #4F6F88;
--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--mono: 'Plex', ui-monospace, SFMono-Regular, 'DejaVu Sans Mono', monospace;
/* ---- Geometria ----
Cztery promienie, nie osiem. Karta, kafelek, pole, znacznik. Każdy
dodatkowy stopień to kolejna decyzja do podjęcia przy każdym elemencie. */
--r-karta: 24px;
--r-kafel: 16px;
--r-pole: 12px;
--r-znak: 999px;
/* Cień jest bardzo płytki i ma zadanie odklejenia karty od płótna,
nie zrobienia z niej unoszącego się okna. */
--cien: 0 1px 2px rgba(22, 24, 28, .04);
--cien-menu: 0 18px 44px -18px rgba(22, 24, 28, .28), 0 2px 8px rgba(22, 24, 28, .06);
--bok: 26px; /* wcięcie treści wewnątrz karty */
--odstep: 14px; /* odstęp między kartami */
--bok-szer: 252px; /* pasek boczny */
--gora-wys: 68px; /* pasek górny */
/* ---- Ustawienia własne. Zmieniane ręcznie, trzymane tutaj, żeby były
w jednym miejscu i nie ginęły przy aktualizacjach arkusza. ---- */
--szerokosc-strony: 1760px; /* max-width całej ramy */
--pasek-kroku: 8px; /* lewy pasek na kroku prowadzonego startu */
}
*, *::before, *::after { box-sizing: border-box; }
/* Natywny niebieski akcent systemu odstawał od palety. */
input[type=checkbox], input[type=radio] { accent-color: var(--atrament); }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--tlo-2);
color: var(--atrament);
font: 15px/1.55 var(--sans);
text-wrap: pretty;
}
a { color: var(--atrament); }
a:hover { color: var(--wtorny); }
:focus-visible {
outline: 2px solid var(--atrament);
outline-offset: 1px;
}
.mono { font-family: var(--mono); }
.drobne { font-size: 12px; color: var(--wtorny); }
.prawo { text-align: right; }
.srodek { text-align: center; }
.nowrap { white-space: nowrap; }
/* ============================ RAMA ============================ */
/* Płótno na zewnątrz, rama w środku. Pasek boczny i treść to dwie kolumny
tej samej ramy, więc pasek kończy się razem z treścią, a nie ciągnie się
w nieskończoność przy krótkiej stronie. */
.rama {
max-width: var(--szerokosc-strony);
margin: 0 auto;
min-height: 100vh;
background: var(--tlo-2);
display: flex;
align-items: stretch;
gap: var(--odstep);
padding: var(--odstep);
}
.rama__prawa {
flex: 1;
min-width: 0; /* bez tego szeroka tabela rozpycha całą kolumnę */
display: flex;
flex-direction: column;
gap: var(--odstep);
}
.tresc {
flex: 1;
display: flex;
flex-direction: column;
/* Bez odstępu na kontenerze. Większość widoków owija bloki w jeden