/* * KFZD.pl — publiczny design system (Faza 3, docs/frontend.md). * Bulma (CDN) daje siatkę/reset, ten plik dokłada design tokens (paleta ciemna * jako domyślna + jasna jako Faza 5, patrz blok [data-theme="light"] niżej) * i style komponentów specyficznych dla serwisu (story-card, vote-buttons, * comment, adult-blur, modale). Tokeny jako CSS custom properties, dlatego * przełącznik motywu (public/assets/js/theme.js) nie wymaga przepisywania * żadnych selektorów — tylko nadpisuje wartości zmiennych przez atrybut * `data-theme` na . */ :root { --bg-top: #0f1115; --bg-bottom: #171b22; --surface: #1e232b; --surface-raised: #262c36; --border: #333a46; --accent: #ffb000; --accent-strong: #ff7b00; --accent-alt: #ff5d5d; --footer-bg: #090b0e; --text: #ffffff; --text-body: #dddddd; --text-meta: #999999; --success: #3ecf8e; --success-bg: rgba(62, 207, 142, 0.12); --error-bg: rgba(255, 93, 93, 0.12); --header-bg: rgba(15, 17, 21, 0.92); --header-bg-solid: rgba(15, 17, 21, 0.98); --radius: 10px; --radius-sm: 6px; } /* Jasny motyw (Faza 5) — te same nazwy zmiennych, kontrastowe jasne wartości (WCAG AA sprawdzone ręcznie dla tekst/tło, docs/frontend.md). Domyślnie ciemny (:root wyżej) — jasny tylko po świadomym wyborze w theme.js. */ :root[data-theme="light"] { --bg-top: #f7f7f9; --bg-bottom: #eceef2; --surface: #ffffff; --surface-raised: #f2f3f6; --border: #d7dbe2; --accent: #9a5b00; --accent-strong: #7a4400; --accent-alt: #c73737; --footer-bg: #e4e6eb; --text: #14161a; --text-body: #33363c; --text-meta: #5b6069; --success: #1f8f5f; --success-bg: rgba(31, 143, 95, 0.12); --error-bg: rgba(199, 55, 55, 0.12); --header-bg: rgba(247, 247, 249, 0.92); --header-bg-solid: rgba(247, 247, 249, 0.98); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text-body); background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) fixed; display: flex; flex-direction: column; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; } h1, h2, h3, h4 { color: var(--text); line-height: 1.25; } h1 { font-size: 1.9rem; margin: 0 0 0.75rem; } h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; } h3 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; } /* ---------------------------------------------------------------- Layout ---------------------------------------------------------------- */ .site-shell { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } /* ---------------------------------------------------------------- Header / nawigacja ---------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } .site-header__inner { position: relative; max-width: 1550px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: 0.5rem; min-height: 3.5rem; flex-wrap: wrap; } /* Na desktopie ten wrapper znika z modelu pudełkowego (display: contents) — .site-header__nav/.site-header__account zostają bezpośrednimi flex-itemami .site-header__inner, dokładnie jak przed dodaniem tego wrappera. Dopiero media query niżej nadaje mu realny wygląd rozwijanego panelu na mobile. */ .site-header__menu { display: contents; } .site-header__brand { font-weight: 800; font-size: 1.25rem; color: var(--text); display: flex; align-items: center; gap: 0.4rem; } .site-header__brand:hover { color: var(--accent); text-decoration: none; } .site-header__logo { width: 2rem; height: 2rem; border-radius: var(--radius-sm); } .site-header__burger { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 0.4rem; cursor: pointer; } .site-header__nav { display: flex; flex: 1; gap: 0.1rem; flex-wrap: wrap; } .site-header__nav a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.55rem; border-radius: var(--radius-sm); color: var(--text-body); font-size: 0.92rem; text-decoration: none; white-space: nowrap; } .site-header__nav a:hover, .site-header__nav a.is-active { background: var(--surface); color: var(--text); } .site-header__account { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; flex-shrink: 0; } .site-header__account form { display: inline; } .site-header__account a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-body); } .site-header__account a:hover { color: var(--text); } /* Wyszukiwarka (Faza 5, docs/strony-publiczne.md#rozszerzenia-planowane-faza-5) */ .site-header__search { display: flex; align-items: center; gap: 0.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.15rem 0.15rem 0.15rem 0.6rem; } .site-header__search input { background: transparent; border: none; color: var(--text-body); font: inherit; width: 9rem; } .site-header__search input:focus { outline: none; } .site-header__search button { display: inline-flex; align-items: center; background: transparent; border: none; color: var(--text-meta); cursor: pointer; padding: 0.3rem; } .site-header__search button:hover { color: var(--accent); } /* Przełącznik motywu (Faza 5, docs/frontend.md#rozszerzenia-planowane-na-później-poza-v1) — dwie ikony nałożone na siebie logicznie (jedna zawsze ukryta przez data-theme). */ #theme-toggle { display: inline-flex; align-items: center; background: transparent; border: none; color: var(--text-meta); cursor: pointer; padding: 0.3rem; } #theme-toggle:hover { color: var(--text); } .theme-icon--light { display: none; } :root[data-theme="light"] .theme-icon--dark { display: none; } :root[data-theme="light"] .theme-icon--light { display: inline; } .icon { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -0.2em; } .icon--sm { width: 0.95em; height: 0.95em; } @media (max-width: 1160px) { .site-header__burger { display: inline-flex; } /* Rozwijany panel pod nagłówkiem (position: absolute) — nie wypycha reszty strony w dół jak poprzednio (display:flex w normalnym przepływie), tylko nakłada się na treść, ze zsuwaniem/zanikaniem zamiast twardego pokaż/ukryj. */ .site-header__menu { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 3.5rem); overflow-y: auto; background: var(--header-bg-solid); border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); padding: 0.5rem 1rem 1rem; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .site-header__menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .site-header__nav, .site-header__account { width: 100%; flex-direction: column; align-items: stretch; gap: 0; } .site-header__nav a { padding: 0.6rem 0.5rem; } } /* ---------------------------------------------------------------- Stopka ---------------------------------------------------------------- */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); margin-top: 3rem; padding: 2rem 1rem; color: var(--text-meta); font-size: 0.9rem; } .site-footer__inner { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .site-footer__links { display: flex; gap: 1rem; flex-wrap: wrap; } .site-footer__links a { color: var(--text-meta); } .site-footer__links a:hover { color: var(--accent); } /* ---------------------------------------------------------------- Hero (strona główna) ---------------------------------------------------------------- */ .hero-box { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-raised) 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem 1.75rem; text-align: center; margin-bottom: 2rem; } .hero-box h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-box p { color: var(--text-body); max-width: 46rem; margin: 0 auto 1.5rem; } /* ---------------------------------------------------------------- Przyciski ---------------------------------------------------------------- */ .btn, button, input[type="submit"] { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 1rem; font: inherit; font-size: 0.92rem; cursor: pointer; text-decoration: none; } .btn:hover, button:hover { border-color: var(--accent); color: var(--text); text-decoration: none; } .btn--cta, .site-header__nav a.btn--cta { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); border: none; color: #1a1200; font-weight: 700; } .btn--cta:hover { filter: brightness(1.08); color: #1a1200; } .btn--danger { border-color: var(--accent-alt); color: var(--accent-alt); } /* ---------------------------------------------------------------- Formularze ---------------------------------------------------------------- */ .field { margin-bottom: 1.1rem; } .field label { display: block; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field textarea, .field select, input[type="text"], input[type="email"], input[type="password"], textarea, select { width: 100%; box-sizing: border-box; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--text); } .field input:focus, .field textarea:focus, .field select:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } textarea { min-height: 6rem; resize: vertical; } #content, #story-edit-content { min-height: 12rem; } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); vertical-align: middle; } input[type="file"] { width: 100%; color: var(--text-body); font: inherit; } input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.9rem; font: inherit; cursor: pointer; margin-right: 0.75rem; } input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover { border-color: var(--accent); } a:focus-visible, button:focus-visible, .btn:focus-visible, input[type="submit"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .field-hint { font-size: 0.85em; color: var(--text-meta); margin: 0.3rem 0 0; } .field-honeypot { position: absolute; left: -9999px; } /* ---------------------------------------------------------------- Komunikaty flash ---------------------------------------------------------------- */ .flash { padding: 0.7rem 1rem; border-radius: var(--radius-sm); margin: 0 0 1.25rem; border: 1px solid transparent; } .flash--success { background: var(--success-bg); color: var(--success); border-color: var(--success); } .flash--error { background: var(--error-bg); color: var(--accent-alt); border-color: var(--accent-alt); } /* ---------------------------------------------------------------- Nagłówki sekcji strony głównej ("Najnowsze historyjki" / "Ostatnio komentowane") — oba poza swoimi kartami/boxami, więc wspólna klasa wystarczy do jednakowego stylu i wyrównania w jednej linii. ---------------------------------------------------------------- */ .section-title { display: flex; align-items: center; gap: 0.4rem; margin: 1.1rem 0 0.75rem; font-size: 1.4rem; } /* ---------------------------------------------------------------- story-card (listingi) ---------------------------------------------------------------- */ .story-list { display: flex; flex-direction: column; gap: 1rem; } .story-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; position: relative; } .story-card__title { margin: 0 0 0.4rem; font-size: 1.2rem; font-weight: 600;} .story-card__title a { color: var(--text); } .story-card__title a:hover { color: var(--accent); text-decoration: none; } .story-card__excerpt { color: var(--text-body); margin: 0 0 0.7rem; } .story-card__meta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-meta); } .story-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; } .tag-nsfw { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--error-bg); color: var(--accent-alt); border: 1px solid var(--accent-alt); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.75rem; font-weight: 700; } .empty-state { color: var(--text-meta); padding: 2rem 0; text-align: center; } /* ---------------------------------------------------------------- Profil publiczny (/uzytkownik/{nick}) ---------------------------------------------------------------- */ .profile-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; } .profile-avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); } .profile-avatar__placeholder { width: 96px; height: 96px; color: var(--text-meta); } .profile-identity h1 { margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } #follow-toggle.is-active { color: var(--accent); border-color: var(--accent); } .role-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.7rem; font-weight: 700; border: 1px solid var(--accent); color: var(--accent); } .role-badge--admin { border-color: var(--accent-alt); color: var(--accent-alt); } .profile-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .profile-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1.1rem; min-width: 8rem; text-align: center; } .profile-stat__value { display: block; font-size: 1.4rem; font-weight: 700; } .profile-stat__label { display: block; font-size: 0.8rem; color: var(--text-meta); } /* Ranking autorów (Faza 6, /ranking) */ .ranking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .ranking-item { display: flex; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 1rem; } .ranking-item__rank { font-weight: 700; color: var(--text-meta); min-width: 2rem; text-align: right; } .ranking-item__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); } .ranking-item__avatar-placeholder { width: 40px; height: 40px; color: var(--text-meta); } .ranking-item__nick { flex: 1; font-weight: 600; } .ranking-item__score { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-meta); } /* Tagi (Faza 5, docs/dodawanie-tresci.md#rozszerzenia-planowane-faza-5) */ .story-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; } .tag-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.65rem; font-size: 0.8rem; color: var(--text-body); } .tag-chip:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } /* Udostępnianie (Faza 5, docs/frontend.md#rozszerzenia-planowane-na-później-poza-v1) */ .share-buttons { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-meta); } .share-buttons a, .share-buttons button { display: inline-flex; align-items: center; gap: 0.25rem; background: transparent; border: none; color: var(--text-body); font: inherit; cursor: pointer; padding: 0; } .share-buttons a:hover, .share-buttons button:hover { color: var(--accent); } /* Zakładki (Faza 5, docs/konta.md#rozszerzenia-planowane-faza-5) */ #bookmark-toggle.is-active { color: var(--accent); } /* ---------------------------------------------------------------- Sidebar "ostatnio komentowane" ---------------------------------------------------------------- */ .sidebar-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; } .sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; } .sidebar-list li { border-bottom: 1px solid var(--border); padding-bottom: 0.9rem; } .sidebar-list li:last-child { border-bottom: none; padding-bottom: 0; } .sidebar-list a { display: block; color: var(--text); font-size: 1.02rem; font-weight: 600; line-height: 1.3; } .sidebar-list a:hover { color: var(--accent); } .sidebar-list__excerpt { margin: 0.4rem 0 0; color: var(--text-meta); font-size: 0.82rem; line-height: 1.4; } .sidebar-list__comment { display: flex; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0; color: var(--text-meta); font-size: 0.76rem; font-style: italic; opacity: 0.85; } /* ---------------------------------------------------------------- Filtry (np. /najlepsze, /archiwum) ---------------------------------------------------------------- */ .filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .filter-bar a { padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-body); font-size: 0.88rem; } .filter-bar a.is-active { background: var(--accent); border-color: var(--accent); color: #1a1200; font-weight: 700; } .filter-bar a:hover { border-color: var(--accent); text-decoration: none; } /* ---------------------------------------------------------------- Pełny widok historyjki ---------------------------------------------------------------- */ .story-article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; } .story-meta { color: var(--text-meta); font-size: 0.9rem; margin-bottom: 1rem; } /* ---------------------------------------------------------------- Strony logowania/rejestracji/resetu hasła — węższa, wyśrodkowana kolumna w tej samej karcie (.story-article) co reszta serwisu, zamiast rozciągania formularza na całą szerokość .site-main. ---------------------------------------------------------------- */ .auth-page { max-width: 28rem; margin: 0 auto; } .auth-page .story-article p:last-child { margin-bottom: 0; } #story-content { color: var(--text-body); white-space: pre-wrap; line-height: 1.6; margin-bottom: 1.25rem; } .story-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* ---------------------------------------------------------------- vote-buttons ---------------------------------------------------------------- */ .vote-buttons { display: inline-flex; align-items: center; gap: 0.5rem; } .vote-buttons button { padding: 0.3rem 0.55rem; background: var(--surface-raised); } .vote-buttons [data-vote-up] { color: var(--success); border-color: var(--success); box-shadow: 0 0 6px rgba(62, 207, 142, 0.45); } .vote-buttons [data-vote-up]:hover { box-shadow: 0 0 12px rgba(62, 207, 142, 0.75); filter: brightness(1.1); } .vote-buttons [data-vote-down] { color: var(--accent-alt); border-color: var(--accent-alt); box-shadow: 0 0 6px rgba(255, 93, 93, 0.45); } .vote-buttons [data-vote-down]:hover { box-shadow: 0 0 12px rgba(255, 93, 93, 0.75); filter: brightness(1.1); } .vote-buttons button[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .vote-buttons .vote-score { font-weight: 700; color: var(--text); min-width: 1.5em; text-align: center; } .vote-buttons .vote-status { font-size: 0.8rem; color: var(--text-meta); } /* ---------------------------------------------------------------- Zgłaszanie / edycja — toggle przyciski tekstowe ---------------------------------------------------------------- */ .report-toggle, .comment-edit-toggle, .comment-delete, .comment-reply-toggle, #story-edit-toggle { background: none; border: none; color: var(--text-meta); padding: 0.2rem 0.4rem; font-size: 0.85rem; } .report-toggle:hover, .comment-edit-toggle:hover, .comment-reply-toggle:hover, #story-edit-toggle:hover { color: var(--accent); border: none; } .comment-delete:hover { color: var(--accent-alt); border: none; } .comment-edit-form, .comment-reply-form, #story-edit-form { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-top: 0.6rem; } .comment-edit-form textarea, .comment-reply-form textarea, .comment-reply-form input[type="email"] { margin-bottom: 0.6rem; } /* ---------------------------------------------------------------- Modal zgłoszenia treści (report-form.php) — reużywa .modal-overlay/.modal-box ---------------------------------------------------------------- */ .modal-box--form { max-width: 30rem; text-align: left; position: relative; } .modal-box--form h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; } .modal-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--text-meta); font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.5rem; } .modal-close:hover { color: var(--accent); border: none; } .report-form-message { font-size: 0.9em; color: var(--success); margin: 0.5rem 0 0; min-height: 1.2em; } .report-form-message.is-error { color: var(--accent-alt); } /* ---------------------------------------------------------------- Komentarze ---------------------------------------------------------------- */ #comments { margin-top: 2rem; } .comment { border-left: 2px solid var(--border); padding-left: 1rem; margin: 1rem 0; } .comment--depth-2, .comment--depth-3, .comment--depth-4, .comment--depth-5 { border-left-color: var(--accent); } .comment__meta { font-size: 0.85em; color: var(--text-meta); margin: 0 0 0.3rem; } .comment__content { color: var(--text-body); margin-bottom: 0.4rem; white-space: pre-wrap; } .comment--removed { opacity: 0.6; } .comment--removed .comment__content { font-style: italic; } /* ---------------------------------------------------------------- Treści 18+ (docs/tresci-18plus.md) ---------------------------------------------------------------- */ .adult-blur { position: relative; } .adult-blur .adult-blur__content { filter: blur(8px); user-select: none; pointer-events: none; transition: filter 0.2s; } .adult-blur.is-revealed .adult-blur__content { filter: none; pointer-events: auto; } .adult-blur__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; text-align: center; padding: 1rem; background: rgba(15, 17, 21, 0.55); /* Zasłona zostaje ciemna w obu motywach (świadomie, spójny wygląd bez względu na jasny/ciemny) — tekst/ikony muszą więc być na sztywno jasne zamiast przez var(--text)/var(--text-body), inaczej w jasnym motywie ciemny tekst ginie na ciemnej zasłonie (ten sam błąd co w .site-header, znaleziony przy testach wizualnych Fazy 5, 2026-07-14). */ color: #ffffff; border-radius: var(--radius); z-index: 2; } .adult-blur.is-revealed .adult-blur__overlay { display: none; } .adult-blur__overlay strong { color: #ffffff; } .adult-blur__overlay button, .adult-blur__overlay a.btn { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); color: #1a1200; border: none; font-weight: 700; } .nsfw-gate { background: var(--surface); border: 1px dashed var(--accent-alt); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; color: var(--text-body); } .nsfw-gate strong { color: var(--text); display: block; margin-bottom: 0.5rem; } /* ---------------------------------------------------------------- Paginacja ---------------------------------------------------------------- */ .pagination { display: flex; justify-content: center; gap: 0.35rem; margin-top: 1.5rem; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem; padding: 0 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-body); } .pagination a:hover { border-color: var(--accent); color: var(--text); text-decoration: none; } .pagination a.is-active { background: var(--accent); border-color: var(--accent); color: #1a1200; font-weight: 700; } /* ---------------------------------------------------------------- Modale (age-gate, potwierdzenia) ---------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(9, 11, 14, 0.85); display: none; align-items: center; justify-content: center; z-index: 100; padding: 1rem; } .modal-overlay.is-open { display: flex; } .modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; max-width: 26rem; width: 100%; text-align: center; } .modal-box h2 { margin-top: 0; } .modal-box .icon { width: 2.5rem; height: 2.5rem; color: var(--accent); margin-bottom: 0.5rem; } .modal-box__actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.25rem; flex-wrap: wrap; } /* ---------------------------------------------------------------- Konto / statyczne strony ---------------------------------------------------------------- */ .page-content { color: var(--text-body); line-height: 1.7; } .page-content :is(h2, h3) { color: var(--text); } .account-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; } .account-section:last-child { margin-bottom: 0; } .account-section h2 { margin-top: 0; } .account-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .account-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; } .account-list li:last-child { border-bottom: none; padding-bottom: 0; } .account-list a { color: var(--text-body); } .account-list a:hover { color: var(--accent); } .account-list .status-tag { font-size: 0.8rem; color: var(--text-meta); white-space: nowrap; } .radio-option { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; color: var(--text-body); margin-bottom: 0.5rem; } .radio-option:last-child { margin-bottom: 0; } table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); margin-bottom: 1rem; } th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); } th { background: var(--surface-raised); color: var(--text); }