/* ============================================================
halonik.css — DOMYŚLNY STYL WSZYSTKICH APLIKACJI HALONIK
Styl: Soft Neobrutalism (pochodzi z aplikacji matura).
- Czyste tło, mocna grafitowa kreska (--ink)
- Twarde, przesunięte cienie bez rozmycia
- Żywa, czytelna paleta pastelowych akcentów
- Zaokrąglone rogi i dopracowane mikrointerakcje
ZASADY (obowiązują każdą aplikację):
1. Ten plik jest jedynym stylem bazowym. Żadnych frameworków CSS
(BeerCSS, Bootstrap, Tailwind…) i żadnych kopii per aplikacja.
2. Nowy komponent potrzebny więcej niż jednej aplikacji dopisujemy
w sekcji „ROZSZERZENIA WSPÓLNE” na końcu, nie w aplikacji.
3. Aplikacja może mieć własny plik CSS tylko dla układu, którego nie da
się wyrazić klasami stąd (np. print.css). Kolory i cienie zawsze
z tokenów (:root), nigdy wartości na sztywno.
4. Serwowany przez moduł Caddy `halonik_assets` pod /assets/css/halonik.css.
Wykaz komponentów: llm_guidelines_caddy_web_app.md, sekcja 5.
============================================================ */
/* Kroje pisma (SIL OFL, wbudowane w binarkę, bez CDN): Space Grotesk = znak i nagłówki, Inter = tekst,
Space Mono = kody, PIN-y, liczby. Space Mono jest siostrzanym krojem Space Grotesk, Inter dobrze go uzupełnia. */
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
/* Skala szarości */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
/* Kontur i twardy cień neobrutalizmu */
--ink: #1e222e;
/* Powierzchnie i tekst */
--bg-main: #ffffff;
--bg-card: #ffffff;
--bg-subtle: #f8fafc;
--text-main: var(--gray-900);
--text-body: var(--gray-700);
--text-muted: var(--gray-500);
/* Akcenty neobrutalizmu — pastele o wysokim kontraście */
--accent-blue: #3d5afe;
--accent-blue-hover: #2a3fd6;
--accent-blue-light: #e0e7ff;
--accent-green: #059669;
--accent-green-hover: #047857;
--accent-green-light: #d1fae5;
--accent-amber: #d97706;
--accent-amber-hover: #b45309;
--accent-amber-light: #fef3c7;
--accent-red: #ef4444;
--accent-red-hover: #dc2626;
--accent-red-light: #fee2e2;
--accent-purple: #8b5cf6;
--accent-purple-light: #ede9fe;
/* Zaokrąglenia */
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
/* Twarde cienie neobrutalizmu */
--shadow-sm: 3px 3px 0 var(--ink);
--shadow: 4px 4px 0 var(--ink);
--shadow-md: 6px 6px 0 var(--ink);
--shadow-lg: 8px 8px 0 var(--ink);
/* Znak halonik.pl: granat i żółty z oryginalnego logo. */
--brand-navy: #001b3d;
--brand-yellow: #ffde59;
--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Skala rozmiarów kart danych (rem = 15px): odznaki i osie / opisy / etykiety wierszy / wartości / tytuły kart. */
--fs-micro: 0.72rem;
--fs-small: 0.8rem;
--fs-body: 0.9rem;
--fs-value: 0.95rem;
--fs-title: 1.05rem;
}
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
background-color: var(--bg-main);
color: var(--text-body);
font-family: var(--font-main);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
a {
color: var(--accent-blue);
text-decoration: none;
font-weight: 600;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, h4 {
color: var(--text-main);
line-height: 1.25;
margin: 0 0 .4em;
letter-spacing: -0.02em;
}
h1 { font-size: 1.65rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
[x-cloak] {
display: none !important;
}
:focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ---------- Kontenery i układ bazowy ---------- */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25rem;
width: 100%;
}
.site-header {
border-bottom: 1.5px solid var(--ink);
background: #ffffff;
padding: 0.85rem 0;
}
.site-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.header-brand-group {
display: flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
}
.brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.brand img {
display: block;
height: 38px;
width: auto;
}
/* ---------- Wybór przedmiotu (Soft Neobrutalism) ---------- */
.header-subject-wrap {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: 0.35rem;
}
.header-subject-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background-color: var(--accent-blue-light);
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
box-shadow: 2px 2px 0 var(--ink);
height: 2.15rem;
padding: 0.2rem 0.65rem;
color: var(--ink);
font-size: 0.88rem;
font-weight: 800;
line-height: 1;
white-space: nowrap;
user-select: none;
}
.header-subject-count {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--gray-100);
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
box-shadow: 2px 2px 0 var(--ink);
height: 2.15rem;
padding: 0.2rem 0.6rem;
color: var(--ink);
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
user-select: none;
}
.header-subject-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: var(--accent-blue-light);
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
box-shadow: 2px 2px 0 var(--ink);
height: 2.15rem;
font-family: inherit;
font-size: 0.88rem;
font-weight: 800;
color: var(--ink);
cursor: pointer;
padding: 0.2rem 1.85rem 0.2rem 0.65rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231e222e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 14px 14px;
outline: none;
transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.12s ease;
white-space: nowrap;
}
.header-subject-select:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--ink);
background-color: #c7d2fe;
}
.header-subject-select:focus {
border-color: var(--accent-blue);
box-shadow: 3px 3px 0 var(--accent-blue);
}
/* ---------- Wyszukiwarka i filtry w nagłówku ---------- */
.header-nav-center {
display: flex;
align-items: center;
gap: 0.45rem;
flex: 1;
max-width: 440px;
min-width: 180px;
}
.header-search-wrap {
flex: 1;
position: relative;
}
.header-search-wrap input {
width: 100%;
height: 2.15rem;
padding: 0.35rem 0.65rem 0.35rem 1.95rem;
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.85rem;
background-color: #ffffff;
color: var(--text-main);
box-shadow: 2px 2px 0 var(--ink);
transition: border-color .1s, box-shadow .1s;
}
.header-search-wrap input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 3px 3px 0 var(--accent-blue);
}
.header-search-icon {
position: absolute;
left: 0.55rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-muted);
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
/* ---------- Zwijana szuflada filtrów pod nagłówkiem ---------- */
.header-filters-drawer {
border-top: 1.5px dashed var(--gray-300);
background-color: var(--bg-subtle);
padding: 0.75rem 0 0.85rem;
}
.header-filters-drawer .filters-grid-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.65rem;
align-items: center;
}
.header-filters-drawer .filters-drawer-status {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.65rem;
padding-top: 0.65rem;
border-top: 1px solid var(--gray-200);
font-size: 0.85rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.filters-tag-counter {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--accent-blue);
color: #ffffff;
font-size: 0.72rem;
font-weight: 800;
width: 17px;
height: 17px;
border-radius: 50%;
line-height: 1;
}
.site-main {
flex: 1;
padding: 1.5rem 0 3.5rem;
}
/* ---------- Przyciski Soft Neobrutalism ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
background-color: var(--bg-card);
color: var(--ink);
border: 1.5px solid var(--ink);
padding: 0.5rem 0.95rem;
min-height: 2.45rem;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
line-height: 1.2;
box-shadow: var(--shadow-sm);
transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.12s ease;
user-select: none;
}
.btn:hover {
text-decoration: none;
transform: translate(-1.5px, -1.5px);
box-shadow: 4.5px 4.5px 0 var(--ink);
}
.btn:active {
transform: translate(1.5px, 1.5px);
box-shadow: 1px 1px 0 var(--ink);
}
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn.sm {
padding: 0.35rem 0.75rem;
min-height: 2.1rem;
font-size: 0.8rem;
}
.btn.icon-btn {
width: 32px;
height: 32px;
min-height: unset;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn.icon-btn .ic {
width: 16px;
height: 16px;
}
.btn.xs {
padding: 0.2rem 0.5rem;
min-height: 1.75rem;
font-size: 0.75rem;
box-shadow: 2px 2px 0 var(--ink);
}
/* Warianty kolorów przycisków */
.btn.ghost { background-color: var(--bg-card); }
.btn.ghost:hover { background-color: var(--gray-100); }
.btn.blue { background-color: var(--accent-blue-light); }
.btn.blue:hover { background-color: #c7d2fe; }
.btn.green { background-color: var(--accent-green-light); }
.btn.green:hover { background-color: #a7f3d0; }
.btn.amber { background-color: var(--accent-amber-light); }
.btn.amber:hover { background-color: #fde68a; }
.btn.danger { background-color: var(--accent-red-light); }
.btn.danger:hover { background-color: #fecaca; }
.btn-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
/* Segmented groups */
.btn-group {
display: inline-flex;
align-items: stretch;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1.5px;
}
.btn-group .btn:first-child {
border-top-left-radius: var(--radius-sm);
border-bottom-left-radius: var(--radius-sm);
margin-left: 0;
}
.btn-group .btn:last-child {
border-top-right-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
}
/* ---------- Ikony Lucide ---------- */
.ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
line-height: 0;
color: inherit;
}
.ic svg {
width: 100%;
height: 100%;
overflow: visible;
stroke: currentColor;
stroke-width: 2.2px;
}
/* ---------- Swobodne ikony zamiast emoji (bez zamykania w pudełkach) ---------- */
.q-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--tone);
line-height: 0;
overflow: visible;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.q-icon .ic, .q-icon svg {
overflow: visible !important;
}
.q-icon .ic { width: 1.35rem; height: 1.35rem; }
.q-card:hover .q-icon {
transform: scale(1.25) rotate(-8deg);
}
.subject-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
color: var(--tone);
line-height: 0;
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.subject-icon .ic {
width: 2.6rem;
height: 2.6rem;
}
.subject-tile:hover .subject-icon {
transform: scale(1.22) rotate(-8deg);
}
.about-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 0.45rem;
color: var(--tone);
vertical-align: -2px;
line-height: 0;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-icon .ic { width: 1.25rem; height: 1.25rem; }
.about-card:hover .about-icon {
transform: scale(1.22) rotate(-8deg);
}
/* ---------- Pigułki / Odznaki (Pills) ---------- */
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.3rem;
font-size: 0.75rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
border: 1.5px solid var(--ink);
line-height: 1.2;
}
.pill > * {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Punkty zadania — jednolity neutralny szary o wysokim kontraście */
.pill.points {
background-color: var(--gray-100);
color: var(--ink);
}
.pill.blue { background-color: var(--accent-blue-light); color: var(--ink); }
.pill.green { background-color: var(--accent-green-light); color: var(--ink); }
.pill.amber { background-color: var(--accent-amber-light); color: var(--ink); }
.pill.red { background-color: var(--accent-red-light); color: var(--ink); }
.pill.purple { background-color: var(--accent-purple-light); color: var(--ink); }
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 0.85rem;
}
.about-card {
background: #ffffff;
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
padding: 0.85rem;
box-shadow: 2px 2px 0 var(--ink);
}
.about-card-title {
font-size: 0.88rem;
font-weight: 800;
color: var(--text-main);
margin-bottom: 0.35rem;
}
.about-card p {
font-size: 0.82rem;
color: var(--text-body);
margin: 0;
line-height: 1.45;
}
/* ---------- Pasek Mojego Zestawu (Board Bar) ---------- */
.board-bar {
background-color: var(--bg-card);
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
padding: 0.75rem 1rem;
margin-bottom: 1.35rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
flex-wrap: wrap;
transition: background-color 0.15s ease;
}
/* Aktywne zielone tło TYLKO gdy w zestawie są zadania */
.board-bar.has-items {
background-color: var(--accent-green-light);
}
.board-bar-info {
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
}
.board-badge {
background-color: var(--gray-100);
color: var(--ink);
border: 1.5px solid var(--ink);
font-size: 0.8rem;
font-weight: 800;
padding: 1px 7px;
border-radius: 999px;
}
.board-bar.has-items .board-badge {
background-color: var(--ink);
color: #ffffff;
}
.board-bar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.copy-status {
color: var(--accent-green);
font-weight: 700;
font-size: 0.82rem;
}
/* ---------- Pola formularza ---------- */
select {
padding: 0.55rem 0.75rem;
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.88rem;
background-color: #ffffff;
color: var(--text-main);
box-shadow: var(--shadow-sm);
transition: border-color 0.1s, box-shadow 0.1s;
height: 2.45rem;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e222e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 16px;
padding-right: 2.4rem;
cursor: pointer;
}
select:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 4px 4px 0 var(--ink);
}
/* ---------- Siatka i Karty zadań ---------- */
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
.q-card {
background: var(--bg-card);
border: 1.5px solid var(--ink);
border-radius: var(--radius);
padding: 14px;
display: flex;
flex-direction: column;
gap: 0.65rem;
box-shadow: var(--shadow-sm);
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
position: relative;
}
.q-card:hover {
transform: translate(-2px, -2px);
box-shadow: var(--shadow-md);
}
/* Karta w zestawie — zielona ramka + zachowany cień */
.q-card.in-arkusz {
border-color: var(--accent-green);
box-shadow: var(--shadow-sm), 0 0 0 2px var(--accent-green) inset;
}
.q-card.in-arkusz:hover {
box-shadow: var(--shadow-md), 0 0 0 2px var(--accent-green) inset;
}
.q-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.82rem;
font-weight: 700;
color: var(--text-main);
gap: 0.4rem;
}
.q-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Trafienia wyszukiwania: żółty puls (3×) gasnący do stałego podświetlenia */
mark.km-hl {
background-color: #fef08a;
color: inherit;
border-radius: 3px;
padding: 0 1px;
animation: km-hl-pulse 0.9s ease-in-out 3;
}
@keyframes km-hl-pulse {
0%, 100% { background-color: #fef08a; box-shadow: none; }
50% { background-color: #fde047; box-shadow: 0 0 10px 2px rgba(250, 204, 21, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
mark.km-hl { animation: none; }
}
/* Urywka kontekstu trafienia na karcie z obrazkiem */
.q-excerpt {
font-size: 0.78rem;
line-height: 1.45;
color: var(--text-body);
margin-top: 0.5rem;
}
.q-img-wrap {
background: #ffffff;
border: 1.5px solid var(--gray-300);
border-radius: var(--radius-sm);
padding: 0;
height: 240px;
max-height: 240px;
display: block;
overflow: hidden;
position: relative;
cursor: pointer;
transition: border-color 0.15s ease;
width: 100%;
}
.q-img-wrap:hover {
border-color: var(--ink);
}
.q-img-wrap img {
width: 100%;
min-width: 100%;
height: auto;
display: block;
object-fit: cover;
object-position: top center;
}
/* Delikatne rozmycie i zanikanie u dołu podglądu (Blur & Fade-out) */
.q-img-wrap::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 30px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.95) 85%, #ffffff 100%);
/* backdrop-filter: blur(2px); */
-webkit-backdrop-filter: blur(2px);
pointer-events: none;
}
.q-actions {
display: flex;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.3rem;
}
.q-actions .btn {
flex: 1;
}
/* ---------- Pusty stan ---------- */
.empty-card {
text-align: center;
padding: 3.5rem 1.5rem;
background: var(--bg-card);
border: 1.5px dashed var(--ink);
border-radius: var(--radius);
margin: 1.5rem 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.empty-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--gray-100);
border: 1.5px solid var(--ink);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.empty-title {
font-size: 1.15rem;
font-weight: 800;
color: var(--text-main);
margin: 0;
}
.empty-desc {
font-size: 0.9rem;
color: var(--text-muted);
max-width: 420px;
margin: 0;
}
/* Pusty start: strzałka do wyboru przedmiotu */
.empty-subject {
text-align: center;
padding: 2.5rem 1.5rem 3rem;
background: var(--bg-card);
border: 1.5px dashed var(--ink);
border-radius: var(--radius);
margin: 1.5rem 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
}
.empty-subject h2 {
margin: 0;
font-size: 1.4rem;
font-weight: 800;
}
.empty-subject p {
margin: 0;
color: var(--text-muted);
font-size: 0.92rem;
}
.empty-subject-arrow {
font-size: 2.6rem;
line-height: 1;
font-weight: 800;
color: var(--accent-blue);
}
.empty-subject-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-top: 0.5rem;
}
/* ---------- Modal podglądu zadania ---------- */
.modal-box {
background: var(--bg-card);
border: 2px solid var(--ink);
border-radius: var(--radius-lg);
width: min(880px, 96vw);
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.4rem;
border-bottom: 1.5px solid var(--ink);
background: var(--bg-card);
}
.modal-head-title {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.05rem;
font-weight: 800;
color: var(--text-main);
}
.modal-x {
background: var(--bg-card);
border: 1.5px solid var(--ink);
color: var(--ink);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: 2px 2px 0 var(--ink);
transition: transform 0.1s, background-color 0.1s;
}
.modal-x:hover {
background: var(--accent-red-light);
transform: translate(-1px, -1px);
}
.modal-body {
padding: 1.25rem 1.4rem;
overflow-y: auto;
flex: 1;
}
.modal-body .mb-img {
max-width: 100%;
display: block;
margin: 0.75rem auto;
background: #ffffff;
border: 1.5px solid var(--gray-300);
border-radius: var(--radius-sm);
cursor: default;
}
.task-subgroup {
margin-top: 1.25rem;
}
.task-subgroup:first-child {
margin-top: 0;
}
.modal-answer {
margin-top: 0.75rem;
padding: 0.85rem 1.1rem;
background: var(--accent-amber-light);
border: 1.5px solid var(--accent-amber);
border-left: 4px solid var(--accent-amber);
border-radius: var(--radius-sm);
}
.modal-answer b {
color: var(--ink);
display: block;
margin-bottom: 0.4rem;
font-weight: 800;
}
.modal-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
flex-wrap: wrap;
padding: 0.8rem 1.4rem;
border-top: 1.5px solid var(--ink);
background: var(--bg-subtle);
}
.modal-foot-nav, .modal-foot-ops {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.modal-nav-group {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.modal-nav-counter {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-main);
padding: 0.35rem 0.75rem;
background-color: var(--bg-card);
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
white-space: nowrap;
box-shadow: 2px 2px 0 var(--ink);
min-height: 2.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ---------- Stopka strony ---------- */
.site-footer {
margin-top: auto;
background: var(--ink);
color: #ffffff;
font-size: 0.88rem;
padding: 1.2rem 0;
border-top: 2px solid var(--ink);
}
.site-footer-row {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.site-footer a {
color: var(--accent-amber-light);
font-weight: 700;
}
.site-footer a:hover {
text-decoration: underline;
}
/* Link „O mnie” i „Statystyki” po lewej, copyright po prawej: jedyna zawartość stopki w każdej aplikacji i na stronach statycznych. */
.site-footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.site-footer-copy { font-size: var(--fs-small); color: var(--gray-400); }
/* ---------- Druk (Print) ---------- */
@media print {
.site-header, .board-bar, .no-print {
display: none !important;
}
.container {
max-width: 100%;
padding: 0;
}
body {
font-size: 12pt;
background: #ffffff;
}
}
/* ---------- Responsywność ---------- */
@media (max-width: 900px) {
.site-header-row {
flex-wrap: wrap;
gap: 0.65rem;
}
.header-nav-center {
order: 3;
max-width: 100%;
flex-basis: 100%;
}
.header-actions {
margin-left: auto;
}
}
@media (max-width: 640px) {
.site-header {
padding: 0.65rem 0;
}
.site-header-row {
row-gap: 0.55rem;
}
/* Rząd 1: logo + wybór przedmiotu (pełna szerokość, nic obok) */
.header-brand-group {
flex: 1 1 100%;
flex-wrap: nowrap;
gap: 0.45rem;
min-width: 0;
}
.brand img {
height: 30px;
}
.header-subject-wrap {
margin-left: 0;
min-width: 0;
flex: 1;
}
.header-subject-select {
min-width: 0;
max-width: 100%;
font-size: 0.8rem;
}
.header-subject-count {
font-size: 0.72rem;
height: 2rem;
flex-shrink: 0;
}
/* Rząd 2: wyszukiwarka + filtry (pełna szerokość) */
.header-nav-center {
order: 3;
flex-basis: 100%;
max-width: 100%;
min-width: 0;
}
/* Rząd 3: akcje zestawu we własnym rzędzie */
.header-actions {
order: 4;
flex-basis: 100%;
margin-left: 0;
justify-content: flex-start;
}
.header-subject-badge {
font-size: 1.15rem;
}
.board-bar {
flex-direction: column;
align-items: stretch;
}
.board-bar-actions {
margin-left: 0;
width: 100%;
justify-content: flex-start;
}
.grid-3 {
grid-template-columns: minmax(0, 1fr); /* 1fr = minmax(auto, 1fr): szerokie treści rozpychały kolumnę poza ekran */
}
.q-actions { flex-wrap: wrap; }
.modal-foot {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
}
/* ============================================================
ROZSZERZENIA WSPÓLNE
Komponenty spoza oryginalnej aplikacji matura, potrzebne wielu
aplikacjom. Wszystko z tokenów (:root) — bez wartości na sztywno.
============================================================ */
[hidden] { display: none !important; }
/* Obrazy z atrybutami width/height (rezerwują miejsce, brak skoków układu) muszą się skalować
proporcjonalnie: bez height:auto max-width zwęża sam bok i obraz jest ściśnięty. :where() =
zerowa specyficzność, więc reguły komponentów (.brand img, .q-img-wrap img…) wygrywają. */
:where(img) { max-width: 100%; height: auto; }
.site-header { position: relative; }
.spacer { flex: 1; }
.muted { color: var(--text-muted); }
.hint { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.75rem; }
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 0.5rem; top: -4rem; z-index: 400;
background: var(--ink); color: #ffffff; padding: 0.5rem 1rem; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 0.5rem; text-decoration: none; }
/* Wpisana fraza: pole szukania świeci na bursztynowo (bez JS, przez :has). */
.header-search-wrap:has(input:not(:placeholder-shown)) input {
border-color: var(--accent-amber);
background-color: var(--accent-amber-light);
box-shadow: 3px 3px 0 var(--accent-amber);
}
.header-search-wrap:has(input:not(:placeholder-shown)) .header-search-icon { color: var(--accent-amber); }
/* Pola tekstowe. :where() = zerowa specyficzność: komponenty (np. .header-search-wrap input)
zawsze wygrywają z tą regułą ogólną, niezależnie od kolejności w pliku. */
:where(input[type="text"], input[type="search"], input[type="url"]) {
padding: 0.55rem 0.75rem;
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.88rem;
background-color: #ffffff;
color: var(--text-main);
box-shadow: var(--shadow-sm);
height: 2.45rem;
width: 100%;
transition: border-color 0.1s, box-shadow 0.1s;
}
:where(input[type="text"], input[type="search"], input[type="url"]):focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 4px 4px 0 var(--ink);
}
input[type="file"] {
width: 100%;
padding: 0.55rem 0.7rem;
font: inherit;
font-size: 0.85rem;
background: var(--bg-subtle);
border: 1.5px dashed var(--ink);
border-radius: var(--radius-sm);
cursor: pointer;
}
.form-grid { display: grid; gap: 0.75rem; }
.form-field { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
/* Checkbox w stylu marki: */
.check {
display: inline-flex; align-items: center; gap: 0.55rem;
font-size: 0.88rem; font-weight: 700; color: var(--ink); cursor: pointer; user-select: none;
}
.check input {
appearance: none; -webkit-appearance: none;
display: grid; place-content: center; flex-shrink: 0;
width: 1.3rem; height: 1.3rem; margin: 0;
background: #ffffff; border: 1.5px solid var(--ink); border-radius: 6px;
box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
transition: background-color 0.12s, transform 0.1s, box-shadow 0.1s;
}
.check input::before {
content: ""; width: 0.7rem; height: 0.7rem; background: var(--ink);
transform: scale(0); transition: transform 0.1s;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.check input:checked { background: var(--accent-green-light); }
.check input:checked::before { transform: scale(1); }
.check input:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
/* Natywny