/* ==========================================================================
MUZOTEKA — GŁÓWNY ARKUSZ STYLÓW
Struktura:
1. Czcionki
2. Zmienne CSS
3. Reset & Baza
4. Nawigacja & Nagłówek
5. Auth & User
6. Wyszukiwarka & Filtry
7. Feed & Karty postów
8. Wideo (embed, miniatura, modal, chart)
9. Akcje & Statystyki
10. Audio
11. Breadcrumbs
12. Toast
13. Modale (auth, newsletter)
14. Share Grid
15. Strony prawne
16. Stopka
17. Cookie Consent
18. Responsywność Mobile (≤576px)
19. Responsywność Small Mobile (≤380px)
20. Tryb ciemny
========================================================================== */
/* ==========================================================================
1. CZCIONKI
========================================================================== */
@font-face {
font-display: optional;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
font-display: optional;
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('/fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
}
/* ==========================================================================
2. ZMIENNE CSS – DESIGN TOKENS
========================================================================== */
:root {
/* Tła */
--bg-main: #faf9f5;
--bg-secondary: #f3f1ea;
/* Obramowania */
--border-color: #e0ddd4;
/* Tekst */
--text-main: #243652;
--text-muted: #5f5545;
--text-dark: #362b1a;
/* Akcent & interakcje */
--accent: #243652;
--active-btn: #0081c7;
--like-pink: #f91880;
/* Layout */
--nav-height: 60px;
/* Przyciski */
--btn-radius: 3px;
--btn-border-w: 2px;
--transition: 0.2s ease;
}
/* ==========================================================================
3. RESET & GLOBALNE STYLE BAZOWE
========================================================================== */
html, body { height: 100%; }
html { scrollbar-gutter: stable; }
body {
display: flex;
flex-direction: column;
background-color: var(--bg-main);
color: var(--text-main);
font-family: 'Inter', sans-serif;
letter-spacing: -0.02em;
margin: 0;
padding-top: var(--nav-height);
padding-bottom: 80px;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
letter-spacing: -1.5px;
line-height: 1;
}
/* ==========================================================================
4. NAWIGACJA & NAGŁÓWEK
========================================================================== */
/* Spójna szerokość treści w całym serwisie — ta sama wartość co .main-feed.feed-grid
i .profile-wrap, żeby nagłówek/wyszukiwarka/stopka nie były węższe niż treść. */
.container {
max-width: 1140px;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: var(--nav-height);
z-index: 9999;
background: var(--bg-main);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
padding: 8px 0;
transform: translateY(0);
transition: transform 0.3s ease-in-out;
}
.navbar .container {
max-width: 1140px;
padding: 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0 auto;
min-height: 44px;
}
.navbar-brand {
text-decoration: none;
color: var(--text-main);
transition: opacity var(--transition);
align-items: flex-start;
}
.navbar-brand:hover { opacity: 0.8; }
.brand-wrap {
display: flex;
align-items: center;
gap: 0;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.navbar-brand h1,
.brand-h1-text {
font-size: 1.2rem;
font-weight: 700;
margin: 0;
letter-spacing: -0.5px;
line-height: 1;
color: var(--text-main);
display: block;
}
.h1-subtitle {
font-size: 0.62rem;
font-weight: 400;
color: var(--text-dark);
opacity: 0.8;
white-space: nowrap;
margin-top: 2px;
line-height: 1;
}
.navbar-logo {
height: 32px;
width: 32px;
aspect-ratio: 1 / 1;
object-fit: contain;
display: block;
}
/* ==========================================================================
5. AUTORYZACJA, UŻYTKOWNIK & PRZYCISK JOIN
========================================================================== */
/* Kontener na .navbar-links + .auth-box + hamburger — na desktopie to zwykły
rząd (hamburger ukryty), na mobile (≤768px, sekcja 18b niżej) .navbar-links
odczepia się w rozwijany panel pod paskiem. */
.navbar-right {
gap: 20px;
}
.navbar-links {
display: flex;
align-items: center;
gap: 18px;
}
/* Hamburger — trzy poziome kreski, ukryty na desktopie (patrz sekcja 18b) */
.navbar-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 30px;
height: 30px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.navbar-toggle span {
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--text-main);
}
.auth-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
button.btn-link-style {
border: 0;
padding: 0;
background: none;
cursor: pointer;
}
.btn-link-style,
.favorites-link,
.newsletter-trigger,
.login-link {
color: var(--text-dark);
text-decoration: none;
font-size: 0.85rem;
font-weight: 700;
transition: color var(--transition);
}
.btn-link-style:hover,
.favorites-link:hover,
.newsletter-trigger:hover,
.login-link:hover {
color: var(--text-main);
}
button.btn-link-style.btn-join,
.btn-join {
border-radius: var(--btn-radius);
font-weight: 700;
font-size: 0.7rem;
padding: 8px 16px;
border: var(--btn-border-w) solid var(--accent);
text-decoration: none;
color: var(--accent);
transition: background var(--transition), color var(--transition);
}
button.btn-link-style.btn-join:hover,
.btn-join:hover {
background: var(--accent);
color: var(--bg-main);
}
.user-welcome {
font-size: 0.85rem;
color: var(--text-main);
margin-right: 0;
}
.user-welcome strong { color: var(--accent); font-weight: 700; }
.user-welcome a { color: inherit; }
.logout-link {
font-size: 0.8rem;
color: var(--text-muted);
text-decoration: none;
transition: color var(--transition);
border-left: 1px solid var(--border-color);
padding-left: 5px;
}
.logout-link:hover { color: #e74c3c; }
.user-avatar {
width: 32px;
height: 32px;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border-color);
display: block;
}
/* Dzwoneczek powiadomień w navbarze */
.notif-bell-wrap {
position: relative;
}
.notif-bell-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: none;
color: var(--text-dark);
cursor: pointer;
transition: color var(--transition);
}
.notif-bell-btn:hover { color: var(--text-main); }
.notif-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: #e74c3c;
color: #fff;
font-size: 0.62rem;
font-weight: 700;
line-height: 16px;
text-align: center;
}
.notif-dropdown {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 320px;
max-width: 90vw;
max-height: 400px;
overflow-y: auto;
z-index: 60;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.notif-item {
display: block;
padding: 12px 16px;
text-decoration: none;
color: var(--text-main);
border-bottom: 1px solid var(--border-color);
font-size: 0.82rem;
line-height: 1.4;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-secondary); }
.notif-item.unread { font-weight: 700; }
.notif-item-time {
display: block;
margin-top: 4px;
font-size: 0.7rem;
font-weight: 400;
color: var(--text-muted);
}
.notif-empty {
padding: 24px 16px;
text-align: center;
color: var(--text-muted);
font-size: 0.82rem;
}
.profile-avatar-big {
width: 60px;
height: 60px;
margin-bottom: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* ==========================================================================
6. WYSZUKIWARKA & FILTRY KATEGORII
========================================================================== */
.search-section {
padding: 20px 0;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
min-height: 150px;
}
.search-box {
max-width: 1140px;
margin: 0 auto;
}
h2.search-title {
font-size: 1.25rem;
font-weight: 400;
}
#main-search {
border: 2px solid var(--border-color);
border-radius: var(--btn-radius);
padding: 14px 20px;
font-weight: 400;
width: 100%;
background: var(--bg-main);
color: var(--text-main);
}
#main-search::placeholder { color: var(--text-muted); }
#main-search:focus {
border-color: var(--accent);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
outline: none;
}
.filter-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.filter-group span {
padding: 6px 16px;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-muted);
}
.cat-item input { display: none; }
.cat-item label {
padding: 6px 12px;
border-radius: var(--btn-radius);
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
transition: background var(--transition), color var(--transition), border-color var(--transition);
background: var(--bg-main);
border: 1px solid var(--border-color);
color: var(--text-muted);
}
.cat-item label:hover {
background: var(--text-muted);
color: var(--bg-main);
border-color: var(--text-muted);
}
.cat-item input:checked + label {
background: var(--accent);
color: var(--bg-main);
border-color: var(--accent);
}
.cat-item label.active,
.cat-item input:checked + label.active {
background: var(--active-btn);
border-color: var(--active-btn);
color: var(--bg-main);
}
/* Wrapper — pozycjonowanie przycisku × */
.search-input-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.search-input-wrap input {
padding-right: 28px !important; /* miejsce na × */
}
/* Przycisk × */
.search-clear-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
display: none; /* domyślnie ukryty — JS pokazuje */
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
background: none;
color: var(--ink-3, #9a9690);
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
border-radius: 50%;
transition: color 0.15s, background 0.15s;
font-family: sans-serif;
font-weight: 400;
z-index: 2;
}
.search-clear-btn:hover {
color: var(--ink, #1a1916);
background: var(--border-color, #e0ddd4);
}
/* Wersja dla strony głównej (inne tokeny CSS) */
#main-search-clear {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
background: none;
color: var(--text-muted);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 0;
border-radius: 50%;
transition: color var(--transition), background var(--transition);
font-family: sans-serif;
z-index: 2;
}
#main-search-clear:hover {
color: var(--text-main);
background: var(--border-color);
}
/* Wrapper dla #main-search na stronie głównej */
.main-search-wrap {
position: relative;
width: 100%;
}
.main-search-wrap #main-search {
padding-right: 44px !important;
width: 100%;
box-sizing: border-box;
}
/* Dropdown podpowiedzi wyszukiwania */
.search-suggestions {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 50;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: left;
}
.search-suggestion-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
text-decoration: none;
color: var(--text-main);
border-bottom: 1px solid var(--border-color);
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover,
.search-suggestion-item:focus {
background: var(--bg-secondary);
}
.search-suggestion-item img {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
background: var(--bg-secondary);
}
.search-suggestion-title {
font-size: 0.9rem;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Nagłówek strony artysty (tag is_artist=1) */
.artist-header {
display: flex;
align-items: center;
gap: 20px;
padding: 24px 0;
margin-bottom: 10px;
}
.artist-header-photo {
flex-shrink: 0;
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
background: var(--bg-secondary);
}
.artist-header-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.artist-header-top {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 12px;
}
.artist-header-name {
font-size: 1.5rem;
margin: 0;
}
.artist-follow-btn {
display: inline-flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
padding: 5px 10px;
border-radius: var(--btn-radius);
border: var(--btn-border-w) solid var(--accent);
background: var(--bg-secondary);
color: var(--accent);
font-weight: 700;
font-size: 0.6rem;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.artist-follow-btn:hover {
background: var(--accent);
color: var(--bg-main);
}
.artist-follow-btn.active {
background: var(--accent);
color: var(--bg-main);
}
.artist-follow-btn.active:hover {
background: var(--bg-secondary);
color: var(--accent);
}
.artist-header-bio {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.5;
margin: 8px 0 0;
max-width: 720px;
}
@media (max-width: 768px) {
.artist-header {
flex-direction: column;
text-align: center;
gap: 12px;
padding: 18px 0;
}
.artist-header-top { justify-content: center; }
.artist-header-bio { max-width: 100%; }
}
/* ==========================================================================
7. FEED & KARTY POSTÓW
========================================================================== */
.main-feed {
max-width: 992px;
margin: 0 auto;
padding: 0 0 100px;
min-height: 80vh;
}
.post-card {
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
transition: opacity 0.3s;
min-height: 150px;
}
/* Meta górna */
.post-meta-top { gap: 10px; min-height: 20px; }
.icon-calendar {
width: 14px;
height: 14px;
opacity: 0.6;
stroke: var(--text-muted);
}
.post-categories-top { display: flex; align-items: center; gap: 5px; }
.post-date-top {
font-size: 0.75rem;
font-weight: 400;
color: var(--text-muted);
display: flex;
align-items: center;
}
.post-date-top a {
color: var(--text-muted);
text-decoration: none;
transition: color var(--transition);
}
.post-date-top a:hover { color: var(--accent); }
/* Układ: treść + miniatura */
.post-flex { display: flex; gap: 20px; justify-content: space-between; }
.post-text { width: 100%; }
/* Odznaki kategorii / tagów */
.badge-tag {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
padding: 6px 10px 4px;
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
display: inline-block;
white-space: nowrap;
min-width: 40px;
text-decoration: none;
color: var(--accent);
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.badge-tag:hover {
background: var(--accent);
color: var(--bg-main);
border-color: var(--accent);
}
.badge-tag.active {
background: var(--active-btn);
border-color: var(--active-btn);
color: var(--bg-main);
}
/* Tytuł */
.post-title {
font-size: 1.4rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 8px;
}
.post-title a {
color: var(--text-main);
text-decoration: none;
transition: color var(--transition);
}
.post-title a:hover { color: var(--accent); }
.post-title-icon {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-right: 7px;
flex-shrink: 0;
position: relative;
top: 1px;
}
.post-title-icon img {
width: 26px;
height: 26px;
display: block;
}
/* Kolor ikony klip – akcent, nie konkuruje z tytułem */
.post-title-icon--clip {
color: var(--active-btn);
opacity: 1;
}
h1.post-title .post-title-icon svg {
width: 22px;
height: 22px;
top: -2px;
}
/* ----- Hero image ----- */
.post-hero {
width: 100%;
aspect-ratio: 21 / 9;
overflow: hidden;
border-radius: var(--btn-radius);
margin: 10px 0 14px;
background: var(--bg-secondary);
outline: 1px solid var(--border-color);
outline-offset: -1px;
}
/* Miniaturka wideo z CDN platformy (wyjątek od $system['showImages'] — zob.
posts-render.php) — .video-play-btn to już istniejący styl (Dailymotion inline). */
.post-hero--video-thumb { position: relative; }
.post-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* aspect-ratio: unset (== auto) — z podanymi w HTML width/height na ![]()
przeglądarka i tak poprawnie zarezerwuje miejsce z realnych wymiarów pliku,
zamiast wymuszać zafiksowany crop 21:9 z .post-hero (dla list-widoku). */
.post-hero--single { aspect-ratio: unset; height: auto; }
.post-hero--single .post-hero-img { height: auto; object-fit: unset; }
/* Opis */
.post-desc {
position: relative;
font-size: 1rem;
color: var(--text-muted);
line-height: 1.5;
}
.post-desc.single { line-height: 1.7; }
/* Czytaj dalej */
.post-card .read-more {
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
color: var(--accent);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.5;
margin-left: 4px;
white-space: nowrap;
}
.post-card .read-more::after {
content: '→';
display: inline-block;
font-size: 0.85rem;
}
.post-card .read-more:hover { opacity: 0.75; }
/* Tagi inline */
.post-tags-container {
margin-top: 12px;
margin-bottom: 5px;
display: flex;
flex-wrap: wrap;
gap: 8px;
min-height: 25px;
}
.post-footer-info {
color: var(--text-muted);
font-size: 12px;
margin: 35px 0;
}
.tag-item {
font-size: 11px;
font-weight: 400;
color: var(--accent);
background: rgba(0, 0, 0, 0.05);
padding: 4px 8px 2px;
border-radius: var(--btn-radius);
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.tag-item:hover {
background: var(--text-muted);
color: var(--bg-main);
}
.tag-item.active {
background: var(--accent);
color: var(--bg-main);
border-color: var(--accent);
}
/* ----- Dymek "Obserwuj" na tagach (lista postów + pojedynczy post) -----
Pokazywany na hover myszką (:hover, CSS-only, bez animacji — instant show,
zgodnie z zasadą "brak animowanych efektów"). Przycisk w środku to mała
kopia .artist-follow-btn — ten sam endpoint scripts/tag-follow.php i ta
sama obsługa niezalogowanego użytkownika (401 → modal logowania) w js/scripts.js. */
.tag-item-wrap {
position: relative;
display: inline-flex;
}
.tag-popover {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 7px;
z-index: 20;
white-space: nowrap;
}
.tag-item-wrap:hover .tag-popover,
.tag-item-wrap:focus-within .tag-popover {
display: block;
}
.tag-popover::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--bg-secondary);
}
.tag-popover-follow-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 11px;
border-radius: var(--btn-radius);
border: var(--btn-border-w) solid var(--accent);
background: var(--bg-secondary);
color: var(--accent);
font-weight: 700;
font-size: 0.68rem;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.tag-popover-follow-btn:hover { background: var(--accent); color: var(--bg-main); }
.tag-popover-follow-btn.active { background: var(--accent); color: var(--bg-main); }
.tag-popover-follow-btn.active:hover { background: var(--bg-secondary); color: var(--accent); }
/* Miniatura posta */
.post-image-container {
width: 120px;
height: 120px;
aspect-ratio: 1 / 1;
border-radius: var(--btn-radius);
overflow: hidden;
flex-shrink: 0;
background: var(--bg-secondary);
}
.post-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.post-card:hover .view-svg { stroke: var(--text-main); }
/* Treść rozszerzona */
.post-long-content { margin-top: 16px; }
.long-content-inner {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.7;
}
.long-content-inner p { margin: 0 0 12px; }
.long-content-inner h2 {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-main);
margin: 14px 0 8px;
line-height: 1.2;
letter-spacing: -1.5px;
}
.long-content-inner h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text-main);
margin: 18px 0 6px;
line-height: 1.3;
}
.long-content-inner ul,
.long-content-inner ol {
padding-left: 20px;
margin: 0 0 12px;
}
.long-content-inner li { margin-bottom: 5px; }
.long-content-inner a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity var(--transition);
}
.long-content-inner a:hover { opacity: 0.7; }
/* ----- Sekcja komentarzy ----- */
.comments-section {
max-width: 992px;
margin: 30px auto 0;
padding: 0 0 60px;
}
.comments-header {
border-bottom: 1px solid var(--border-color);
padding-bottom: 14px;
margin-bottom: 24px;
}
.comments-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 1rem;
font-weight: 700;
color: var(--text-main);
margin: 0;
letter-spacing: -0.02em;
}
.comments-title svg {
width: 18px;
height: 18px;
stroke: var(--text-muted);
flex-shrink: 0;
}
.comments-count-badge {
font-size: 0.72rem;
font-weight: 700;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
padding: 2px 8px;
color: var(--text-muted);
line-height: 1.5;
}
/* ----- Lista komentarzy ----- */
.comments-list {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 32px;
}
.comments-loader {
text-align: center;
padding: 20px;
font-size: 0.85rem;
color: var(--text-muted);
}
.comments-empty {
text-align: center;
padding: 30px 0;
font-size: 0.88rem;
color: var(--text-muted);
}
/* ----- Pojedynczy komentarz ----- */
.comment-item {
display: flex;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--border-color);
animation: commentFadeIn 0.25s ease;
}
@keyframes commentFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.comment-item:last-child { border-bottom: none; }
/* Avatar */
.comment-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--border-color);
background: var(--bg-secondary);
}
.comment-avatar-placeholder {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-muted);
}
/* Treść komentarza */
.comment-body {
flex: 1;
min-width: 0;
}
.comment-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.comment-author {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-main);
}
.comment-date {
font-size: 0.72rem;
color: var(--text-muted);
}
.comment-badge-own {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
padding: 2px 6px;
background: var(--accent);
color: var(--bg-main);
border-radius: var(--btn-radius);
letter-spacing: 0.03em;
}
.comment-content {
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.6;
word-break: break-word;
white-space: pre-wrap;
}
/* Akcje pod komentarzem */
.comment-actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 10px;
}
.comment-like-btn,
.comment-report-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
font-family: inherit;
transition: color var(--transition);
line-height: 1;
}
.comment-like-btn:hover { color: var(--like-pink); }
.comment-report-btn:hover { color: #e74c3c; }
.comment-like-btn.active { color: var(--like-pink); }
.comment-like-btn svg,
.comment-report-btn svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
transition: fill var(--transition);
}
.comment-like-btn.active svg { fill: var(--like-pink); stroke: var(--like-pink); }
.comment-reported-msg {
font-size: 0.72rem;
color: var(--text-muted);
font-style: italic;
}
/* ----- Formularz dodawania ----- */
.comment-form-wrap {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
padding: 24px;
}
.comment-form-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-main);
margin: 0 0 18px;
}
.comment-guest-fields { margin-bottom: 14px; }
.comment-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.comment-field {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 12px;
}
.comment-field label {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
}
.comment-field label small {
font-weight: 400;
opacity: 0.8;
}
.comment-field input,
.comment-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
background: var(--bg-main);
color: var(--text-main);
font-family: inherit;
font-size: 0.88rem;
transition: border-color var(--transition);
box-sizing: border-box;
resize: vertical;
}
.comment-field input:focus,
.comment-field textarea:focus {
border-color: var(--accent);
outline: none;
}
.comment-char-count {
font-size: 0.7rem;
color: var(--text-muted);
text-align: right;
margin-top: 0;
}
.comment-char-count.warn { color: #e67e22; }
.comment-char-count.over { color: #e74c3c; }
.comment-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 4px;
}
.comment-notify-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.78rem;
color: var(--text-muted);
cursor: pointer;
}
.comment-notify-label input { cursor: pointer; accent-color: var(--accent); }
.btn-comment-submit {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.btn-comment-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.comment-form-msg {
margin-top: 12px;
font-size: 0.82rem;
border-radius: var(--btn-radius);
padding: 0;
min-height: 0;
transition: all 0.2s;
}
.comment-form-msg.error { color: #e74c3c; }
.comment-form-msg.success { color: #27ae60; }
/* ----- Modal zgłoszenia ----- */
.comment-report-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 3500;
padding: 20px;
}
.comment-report-card {
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
padding: 28px;
width: 100%;
max-width: 360px;
position: relative;
}
.comment-report-card h3 {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 16px;
color: var(--text-main);
}
.comment-report-reasons {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}
.comment-report-reasons label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-muted);
cursor: pointer;
}
.comment-report-reasons input { accent-color: var(--accent); }
.comment-report-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.btn-report-cancel {
background: none;
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
padding: 8px 16px;
font-size: 0.78rem;
font-weight: 700;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
transition: all var(--transition);
}
.btn-report-cancel:hover { border-color: var(--text-muted); color: var(--text-main); }
.btn-report-submit {
background: #e74c3c;
border: none;
border-radius: var(--btn-radius);
padding: 8px 16px;
font-size: 0.78rem;
font-weight: 700;
color: #fff;
cursor: pointer;
font-family: inherit;
transition: background var(--transition);
}
.btn-report-submit:hover { background: #c0392b; }
/* ==========================================================================
8. WIDEO – EMBED, MINIATURA, MODAL, CHART
========================================================================== */
/* ----- Embed na pełną szerokość (single post) ----- */
.post-video-embed {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
margin: 20px 0;
border-radius: var(--btn-radius);
overflow: hidden;
background: #000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.post-video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ----- Miniatura z play buttonem (feed – prawa strona) ----- */
.post-video-thumb {
position: relative;
cursor: pointer;
}
.post-video-thumb .post-img { display: block; }
/* ----- Miniatura inline wewnątrz .post-desc (pełna szerokość) ----- */
.post-video-thumb--inline {
position: relative;
width: 100%;
margin: 14px 0 10px;
border-radius: var(--btn-radius);
overflow: hidden;
cursor: pointer;
background: #000;
padding-top: 56.25%;
}
.post-video-thumb--inline img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
/* ----- Play button – wspólny dla obu miniatur ----- */
.video-play-btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
transition: background var(--transition);
}
.post-video-thumb:hover .video-play-btn,
.post-video-thumb--inline:hover .video-play-btn,
.post-hero--video-thumb:hover .video-play-btn {
background: rgba(0, 0, 0, 0.55);
}
.video-play-btn svg {
color: #fff;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
/* ----- Modal wideo ----- */
.video-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
z-index: 3000;
padding: 20px;
}
.video-modal {
width: 100%;
max-width: 860px;
position: relative;
}
.close-video {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: rgba(255, 255, 255, 0.8);
font-size: 2rem;
line-height: 1;
cursor: pointer;
padding: 0;
transition: color var(--transition);
}
.close-video:hover { color: #fff; }
.video-modal-title {
font-size: 0.88rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.02em;
}
.video-modal-embed {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
border-radius: var(--btn-radius);
overflow: hidden;
}
.video-modal-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-modal-source {
display: block;
margin-top: 10px;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
text-align: right;
transition: color var(--transition);
}
.video-modal-source:hover { color: rgba(255, 255, 255, 0.9); }
/* ----- Chart Top 10 ----- */
.video-chart {
margin-bottom: 28px;
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
overflow: hidden;
background: var(--bg-secondary);
}
.video-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
border-bottom: 1px solid var(--border-color);
}
.video-chart-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
font-weight: 700;
color: var(--text-main);
letter-spacing: -0.02em;
}
.video-chart-title svg { stroke: var(--accent); }
.video-chart-period-switch { display: flex; gap: 4px; }
.chart-period-btn {
padding: 4px 12px;
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
background: var(--bg-main);
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all var(--transition);
}
.chart-period-btn.active,
.chart-period-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--bg-main);
}
.video-chart-list { display: flex; flex-direction: column; }
.video-chart-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
transition: background var(--transition);
}
.video-chart-item:last-child { border-bottom: none; }
.video-chart-item:hover { background: var(--bg-main); }
.chart-pos {
font-size: 1rem;
font-weight: 800;
color: var(--text-muted);
width: 22px;
text-align: center;
flex-shrink: 0;
letter-spacing: -1px;
}
.chart-pos.gold { color: #f39c12; }
.chart-pos.silver { color: #95a5a6; }
.chart-pos.bronze { color: #ca6f1e; }
.chart-thumb-wrap {
position: relative;
width: 80px;
height: 45px;
flex-shrink: 0;
border-radius: var(--btn-radius);
overflow: hidden;
}
.chart-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.chart-play-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
color: #fff;
opacity: 0;
}
.video-chart-item:hover .chart-play-icon { opacity: 1; }
.chart-info { flex: 1; min-width: 0; }
.chart-track {
font-size: 0.8rem;
font-weight: 700;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.chart-artist {
font-size: 0.72rem;
color: var(--text-muted);
margin-top: 2px;
}
.chart-stats { flex-shrink: 0; text-align: right; }
.chart-views {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: var(--text-muted);
white-space: nowrap;
}
.video-chart-empty {
padding: 20px;
text-align: center;
font-size: 0.8rem;
color: var(--text-muted);
}
/* =============================================================================
KLIP HERO SECTION — dodaj do style.css (sekcja 8 – Wideo)
============================================================================= */
/* ----- Wrapper sekcji ----- */
.klip-hero-section {
border: 1px solid var(--border-color);
overflow: hidden;
background: var(--bg-secondary);
margin: 15px 0 0 0;
}
.klip-hero-label {
padding: 10px 20px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-muted);
border-bottom: 1px solid var(--border-color);
}
/* ----- Grid: hero lewy + mini prawy ----- */
.klip-hero-grid {
display: grid;
grid-template-columns: 1fr 260px;
gap: 0;
}
/* ----- Hero #1 ----- */
.klip-hero-main {
border-right: 1px solid var(--border-color);
}
.klip-hero-thumb {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #000;
}
.klip-hero-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.klip-hero-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .25);
transition: background var(--transition);
}
.klip-hero-thumb:hover .klip-hero-overlay { background: rgba(0, 0, 0, .45); }
.klip-pos-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--accent);
color: var(--bg-main);
font-size: 0.65rem;
font-weight: 800;
padding: 3px 8px;
border-radius: var(--btn-radius);
letter-spacing: .03em;
line-height: 1.4;
}
.klip-hero-play {
background: rgba(255, 255, 255, .12);
border: 2px solid rgba(255, 255, 255, .75);
border-radius: 50%;
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
padding-left: 4px; /* optyczne wyśrodkowanie trójkąta */
}
.klip-hero-play:hover {
background: var(--accent);
border-color: var(--accent);
}
.klip-hero-info {
padding: 14px 18px;
}
.klip-hero-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-main);
line-height: 1.35;
margin-bottom: 5px;
letter-spacing: -.01em;
}
.klip-hero-artist {
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 8px;
}
.klip-hero-stats {
display: flex;
gap: 14px;
font-size: 0.72rem;
color: var(--text-muted);
}
/* ----- Mini karty #2-5 ----- */
.klip-hero-side {
display: flex;
flex-direction: column;
}
.klip-mini-card {
display: flex;
gap: 10px;
padding: 15px 12px;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
transition: background var(--transition);
}
.klip-mini-card:last-child { border-bottom: none; }
.klip-mini-card:hover { background: var(--bg-main); }
.klip-mini-thumb {
position: relative;
width: 88px;
flex-shrink: 0;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
border-radius: 2px;
}
.klip-mini-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.klip-pos-badge--sm {
font-size: 0.58rem;
padding: 2px 5px;
top: 4px;
left: 4px;
}
.klip-mini-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .45);
border: none;
cursor: pointer;
color: #fff;
opacity: 0;
padding-left: 2px;
}
.klip-mini-card:hover .klip-mini-play { opacity: 1; }
.klip-mini-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-main);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
align-self: center;
}
/* ==========================================================================
9. AKCJE POSTU & PASEK STATYSTYK
========================================================================== */
.post-actions { font-size: 0.8rem; color: var(--text-muted); }
.btn-action {
border-radius: var(--btn-radius);
font-weight: 700;
font-size: 0.7rem;
padding: 8px 12px;
border: var(--btn-border-w) solid var(--accent);
text-decoration: none;
color: var(--accent);
background: var(--bg-secondary);
transition: background var(--transition), color var(--transition);
cursor: pointer;
}
.btn-action:hover {
background: var(--accent);
color: var(--bg-main);
}
.stats-container {
background: var(--bg-secondary);
padding: 9px 14px 8px;
border-radius: var(--btn-radius);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
gap: 15%;
width: 60%;
min-height: 38px;
}
.stat-item {
display: flex;
align-items: center;
line-height: 1;
gap: 2px;
}
.stat-num {
font-size: 0.8rem;
font-weight: 700;
color: var(--text-main);
}
/* Ikony SVG */
.heart-svg, .view-svg, .fire-svg, .share-svg, .comment-svg {
width: 18px;
height: 18px;
stroke-width: 2;
fill: none !important;
stroke: var(--text-muted);
transition: all var(--transition);
flex-shrink: 0;
display: block;
}
.share-btn { cursor: pointer; display: flex; align-items: center; }
.heart-svg { cursor: pointer; }
.heart-svg:hover { stroke: var(--like-pink); }
.heart-svg.active { fill: var(--like-pink) !important; stroke: var(--like-pink); }
.view-svg { opacity: 0.8; }
.fire-svg { stroke: var(--accent); }
.share-svg { cursor: pointer; }
.share-svg:hover { stroke: var(--text-main); }
.like-box { min-width: auto; gap: 6px; }
.stats-container .ms-3 { margin-left: 0 !important; }
.comment-stat-link {
text-decoration: none;
color: inherit;
}
.comment-stat-link:hover .comment-svg { stroke: var(--accent); }
.comment-stat-link:hover .stat-num { color: var(--accent); }
/* ==========================================================================
10. ODTWARZACZ AUDIO
========================================================================== */
.audio-player-container {
background: var(--bg-secondary);
padding: 15px;
border-radius: var(--btn-radius);
border: 1px solid var(--border-color);
min-height: 80px;
}
.player-label {
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 1px;
margin-bottom: 10px;
text-transform: uppercase;
}
audio.custom-audio {
height: 35px;
filter: grayscale(1) invert(0);
width: 100%;
}
audio.custom-audio::-moz-range-progress { background-color: var(--text-main); }
.btn-audio {
background: transparent;
border: var(--btn-border-w) solid var(--text-main);
color: var(--text-main);
transition: all var(--transition);
margin-right: 5px;
border-radius: var(--btn-radius);
cursor: pointer;
}
.btn-audio:hover {
background: var(--text-main);
color: var(--bg-main);
}
.btn-audio.playing {
background: var(--text-main);
color: var(--bg-main);
border-color: var(--text-main);
animation: pulse-border 2s infinite;
}
.btn-audio .icon { font-size: 10px; margin-right: 4px; }
@keyframes pulse-border {
0% { box-shadow: 0 0 0 0 rgba(0, 48, 114, 0.4); }
70% { box-shadow: 0 0 0 6px rgba(0, 48, 114, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 48, 114, 0); }
}
/* ==========================================================================
11. BREADCRUMBS
========================================================================== */
.breadcrumb-container { max-width: 992px; margin: 0 auto; padding: 0 15px; }
.custom-breadcrumbs {
background: transparent;
padding: 10px 0;
margin-bottom: 20px;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px dashed var(--border-color);
min-height: 40px;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
color: var(--text-muted);
font-weight: 400;
}
.breadcrumb-item a {
color: var(--text-muted);
text-decoration: none;
transition: color var(--transition);
line-height: 1.5rem;
}
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item.active {
text-overflow: ellipsis;
color: var(--accent);
}
/* ==========================================================================
12. TOAST – POWIADOMIENIA
========================================================================== */
#toast-container {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
.custom-toast {
background: var(--text-main);
color: var(--bg-main);
padding: 22px 44px;
border-radius: var(--btn-radius);
font-size: 0.85rem;
font-weight: 400;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: none;
animation: slideUp 0.5s ease;
}
@keyframes slideUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ==========================================================================
13. MODALE (AUTH, NEWSLETTER)
========================================================================== */
/* Nakładka */
.newsletter-overlay,
.auth-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
}
/* Karta */
.newsletter-modal,
.auth-card {
background: var(--bg-main);
border: 1px solid var(--border-color);
padding: 40px;
width: 90%;
border-radius: var(--btn-radius);
text-align: center;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.newsletter-modal { max-width: 450px; }
.auth-card { max-width: 400px; }
/* Zamknij */
.close-newsletter,
.close-auth {
position: absolute;
top: 15px; right: 15px;
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--text-muted);
line-height: 1;
transition: color var(--transition);
}
.close-newsletter:hover,
.close-auth:hover { color: var(--text-main); }
/* Tytuł */
.modal-title {
font-size: 1.7rem !important;
font-weight: 700;
color: var(--text-main) !important;
margin-bottom: 10px !important;
line-height: 1.5;
}
/* Lead */
.newsletter-modal p,
.auth-card p {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 25px;
}
/* Inputy */
.newsletter-modal input[type="text"],
.newsletter-modal input[type="email"],
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
color: var(--text-main);
background: var(--bg-secondary);
outline: none;
box-sizing: border-box;
transition: border-color var(--transition);
}
.newsletter-modal input:focus,
.auth-card input:focus { border-color: var(--accent); }
/* Submit */
.btn-submit,
.auth-overlay .btn-action {
width: 100%;
padding: 12px;
background: var(--accent);
color: var(--bg-main);
border: none;
border-radius: var(--btn-radius);
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.btn-submit:hover,
.auth-overlay .btn-action:hover { background: var(--active-btn); }
/* Przełącznik logowanie ↔ rejestracja */
.auth-switch {
margin-top: 20px;
font-size: 0.85rem;
color: var(--text-muted);
}
.auth-switch button {
border: 0;
background: none;
padding: 0;
cursor: pointer;
}
.auth-switch button,
.auth-switch a {
color: var(--accent);
text-decoration: none;
font-weight: 700;
transition: color var(--transition);
}
.auth-switch button:hover,
.auth-switch a:hover { color: var(--active-btn); }
/* Hasło – wrapper z okiem */
.profile-update-form .password-wraper,
.auth-card .password-wrapper {
position: relative;
width: 100%;
}
.profile-update-form .toggle-password,
.auth-card .toggle-password {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
margin-top: -7px;
color: var(--accent);
opacity: 0.7;
transition: opacity var(--transition);
user-select: none;
}
.profile-update-form .toggle-password:hover,
.auth-card .toggle-password:hover { opacity: 1; }
.profile-update-form .toggle-password svg,
.auth-card .toggle-password svg { display: block; width: 20px; height: 20px; }
.auth-card .password-wrapper input { padding-right: 45px !important; }
/* Generator hasła */
.auth-card .password-tools {
text-align: right;
margin-top: -10px;
margin-bottom: 20px;
}
.auth-card .btn-link {
background: none;
border: none;
padding: 0;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
text-decoration: none;
text-underline-offset: 3px;
cursor: pointer;
opacity: 0.8;
transition: color var(--transition), opacity var(--transition);
}
.auth-card .btn-link:hover { color: var(--text-main); opacity: 1; }
/* Sukces */
#auth-success-section .btn-link-style:hover {
text-decoration: underline;
color: var(--text-main) !important;
}
#auth-success-section .success-icon {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
/* Textarea (kontakt) */
.newsletter-modal textarea {
width: 100%;
border-radius: var(--btn-radius);
border: 1px solid var(--border-color);
padding: 10px;
margin-bottom: 15px;
background: var(--bg-secondary);
color: var(--text-main);
box-sizing: border-box;
transition: border-color var(--transition);
resize: vertical;
}
.newsletter-modal textarea:focus { border-color: var(--accent); outline: none; }
/* Stan wysyłania formularza — spinner w przycisku + przygaszone/zablokowane pola */
.form-busy input,
.form-busy textarea,
.form-busy select {
opacity: 0.5;
pointer-events: none;
transition: opacity 0.15s ease;
}
.btn-submit .spinner-border,
.auth-overlay .btn-action .spinner-border {
width: 1rem;
height: 1rem;
border-width: 2px;
margin-right: 8px;
vertical-align: -2px;
}
.btn-submit:disabled,
.auth-overlay .btn-action:disabled {
opacity: 0.75;
cursor: not-allowed;
}
/* Komunikat inline w modalu (np. błąd formularza kontaktowego) */
.form-inline-msg {
display: none;
font-size: 0.82rem;
padding: 10px 12px;
border-radius: var(--btn-radius);
margin-bottom: 15px;
text-align: left;
}
.form-inline-msg.show { display: block; }
.form-inline-msg.is-error { background: rgba(231, 76, 60, 0.12); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3); }
.form-inline-msg.is-success { background: rgba(46, 204, 113, 0.12); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
/* ==========================================================================
14. SHARE GRID
========================================================================== */
.share-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
margin: 20px 0;
}
.share-icon-link {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none !important;
color: var(--text-muted);
transition: transform var(--transition), color var(--transition);
}
.share-icon-link i {
width: 45px;
height: 45px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
margin-bottom: 5px;
color: var(--text-main);
transition: border-color var(--transition), color var(--transition);
}
.share-icon-link span {
font-size: 0.55rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.share-icon-link:hover { color: var(--accent); }
.share-icon-link:hover i { border-color: var(--accent); color: var(--accent); }
#share-url-field {
width: 100%;
border-radius: 2px;
border: 1px solid var(--border-color);
padding: 8px;
background: var(--bg-secondary);
color: var(--text-muted);
font-size: 0.65rem;
text-align: center;
box-sizing: border-box;
}
/* ==========================================================================
15. STRONY PRAWNE
========================================================================== */
.legal-container { max-width: 992px; margin: 15px auto 40px; padding: 0 15px; }
.legal-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
padding: 40px;
}
.legal-content h2 {
font-size: 1.65rem;
font-weight: 700;
margin-bottom: 30px;
color: var(--accent);
}
.legal-content h3 {
font-size: 1.25rem;
font-weight: 700;
margin: 25px 0 15px;
color: var(--text-main);
}
.legal-content p,
.legal-content li {
line-height: 1.7;
color: var(--text-main);
opacity: 0.9;
margin-bottom: 15px;
}
.legal-content ul { padding-left: 20px; margin-bottom: 20px; }
.last-update {
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 40px;
border-top: 1px solid var(--border-color);
padding-top: 20px;
}
/* ==========================================================================
15b. BĄDŹ NA BIEŻĄCO (badz-na-biezaco.php)
========================================================================== */
/* Ta sama karta co strony prawne (.legal-card) — spójny, obramowany kontener
zamiast luźnych sekcji na gołym tle strony. */
.notify-card { padding: 48px 40px; }
.notify-divider {
border-top: 1px solid var(--border-color);
margin: 40px 0;
}
.notify-section-title {
text-align: center;
font-size: 1.3rem;
font-weight: 800;
color: var(--text-main);
margin-bottom: 28px;
}
.notify-hero { text-align: center; }
.notify-hero h1 {
font-size: 2.1rem;
font-weight: 800;
margin-bottom: 16px;
color: var(--accent);
}
.notify-hero-lead {
max-width: 620px;
margin: 0 auto;
font-size: 1rem;
line-height: 1.75;
color: var(--text-main);
opacity: 0.9;
}
.notify-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.notify-step { text-align: center; padding: 0 8px; }
.notify-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--accent);
color: var(--bg-main);
font-weight: 800;
font-size: 0.95rem;
margin: 0 auto 16px;
}
.notify-step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--text-main); }
.notify-step p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.notify-channels-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.notify-channel-card {
display: flex;
flex-direction: column;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
padding: 26px 24px;
}
.notify-channel-card:hover {
border-color: var(--accent);
}
.notify-channel-card--soon { opacity: 0.75; }
.notify-channel-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--bg-secondary);
font-size: 1.4rem;
margin-bottom: 14px;
}
.notify-channel-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--text-main); }
.notify-channel-badge {
display: inline-block;
align-self: flex-start;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
padding: 3px 10px;
border-radius: 20px;
margin-bottom: 12px;
}
.notify-channel-badge--live { background: rgba(39,174,96,.15); color: #27ae60; }
.notify-channel-badge--soon { background: var(--border-color); color: var(--text-muted); }
.notify-channel-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.notify-cta { text-align: center; }
.notify-cta-btn { padding: 14px 36px; font-size: 0.95rem; }
.notify-cta-note { margin-top: 16px; font-size: 0.8rem; color: var(--text-muted); }
@media (max-width: 768px) {
/* .legal-card ma już własny mobilny padding (sekcja 15) — dziedziczymy go. */
.notify-steps-grid { grid-template-columns: 1fr; gap: 24px; }
.notify-channels-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
.notify-hero h1 { font-size: 1.5rem; }
.notify-divider { margin: 28px 0; }
.notify-channels-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
16. STOPKA
========================================================================== */
.footer {
padding: 15px 0;
background: var(--bg-main);
color: var(--text-muted);
font-size: 0.75rem;
border-top: 1px solid var(--border-color);
min-height: 50px;
}
.footer .container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
max-width: 1140px;
margin: 0 auto;
}
.footer-nav { display: flex; gap: 15px; margin-bottom: 0 !important; }
.footer button {
border: 0;
padding: 0;
background: none;
cursor: pointer;
}
.footer button,
.footer-nav a {
text-decoration: none;
color: var(--text-muted);
font-size: 0.75rem;
transition: color var(--transition);
}
.footer button:hover,
.footer-nav a:hover { color: var(--accent); }
@media (min-width: 577px) {
.footer {
position: fixed;
bottom: 0; left: 0;
width: 100%;
z-index: 9997;
transform: translateY(0);
transition: transform 0.3s ease-in-out;
backdrop-filter: blur(10px);
}
.footer .container { flex-direction: row; justify-content: space-between; }
}
/* ==========================================================================
17. COOKIE CONSENT
========================================================================== */
#s-cnt .c-bn,
#s-cnt .c-tgl:checked + .c-tgl-b { background-color: var(--accent) !important; }
#cc--main .cm {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--btn-radius) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
#cc--main .cm__title { color: var(--text-main) !important; font-family: inherit; }
#cc--main .cm__desc { color: var(--text-muted) !important; }
#cc--main .c-bns .c-bn--secondary {
background: transparent !important;
color: var(--text-main) !important;
border: 1px solid var(--border-color) !important;
}
#cc--main .c-bns .c-bn--secondary:hover { background: var(--border-color) !important; }
/* ==========================================================================
POWIĄZANE POSTY — sekcja "Więcej o [tag]" na stronie single posta
========================================================================== */
.related-posts {
max-width: 992px;
margin: 40px auto 0;
padding: 0 0 60px;
}
.related-posts-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-color);
}
.related-posts-header-left {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.related-posts-title {
font-size: 1rem;
font-weight: 700;
color: var(--text-main);
margin: 0;
letter-spacing: -0.02em;
}
.related-posts-tag {
color: var(--active-btn);
text-decoration: none;
transition: opacity var(--transition);
}
.related-posts-tag:hover { opacity: 0.75; }
.related-posts-all {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
text-decoration: none;
white-space: nowrap;
transition: color var(--transition);
flex-shrink: 0;
}
.related-posts-all:hover { color: var(--accent); }
.related-posts-all svg { flex-shrink: 0; }
/* Kafelki wewnątrz tej siatki to .content-tile (patrz sekcja 17b) — jeden
wspólny komponent karty-posta reużywany też w "Top tygodnia"/"Top miesiąca". */
.related-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.related-post-play {
position: absolute;
bottom: 8px;
right: 8px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0,0,0,.55);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding-left: 2px;
transition: background var(--transition);
}
.content-tile:hover .related-post-play { background: var(--accent); }
.related-posts-extra-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.related-posts-extra-tag {
font-size: 0.7rem;
font-weight: 700;
color: var(--text-muted);
text-decoration: none;
padding: 2px 8px;
border: 1px solid var(--border-color);
border-radius: 2px;
background: var(--bg-secondary);
transition: color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.related-posts-extra-tag:hover {
color: var(--active-btn);
border-color: var(--active-btn);
}
/* ==========================================================================
17b. TOP TYGODNIA (top-tygodnia.php)
Dwupoziomowy układ: podium (miejsca 1-3, większe karty kolorowane wg rangi
złoto/srebro/brąz) + zwięzła lista (miejsca 4+). Obie formy pokazują krótki
wstęp z treści posta zamiast pustego miejsca, gdy nie ma miniatury (zdjęcia
wyłączone globalnie albo brak obrazka/wideo) — zob. _chart_excerpt() w PHP.
========================================================================== */
.chart-page-header {
padding: 24px 0 8px;
text-align: center;
}
.chart-page-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 6px;
}
.chart-page-subtitle {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 18px;
}
.chart-period-toggle {
display: inline-flex;
gap: 4px;
padding: 4px;
border-radius: var(--btn-radius);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
margin-bottom: 24px;
}
.chart-period-link {
padding: 6px 18px;
border-radius: calc(var(--btn-radius) - 2px);
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
color: var(--text-muted);
transition: background var(--transition), color var(--transition);
}
.chart-period-link:hover { color: var(--text-main); }
.chart-period-link.active {
background: var(--active-btn);
color: #fff;
}
.chart-fire-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,.55);
color: #f39c12;
}
/* ----- .content-tile — komponent współdzielony ------------------------------
Karta "post w formie kafelka": media (zdjęcie/miniatura wideo) ALBO krótki
wstęp z treści gdy brak zdjęcia ($system['showImages'] wyłączone albo post
po prostu nie ma obrazka — nigdy pusta karta), tytuł, statystyki. Używane
w trzech miejscach: zwykłe kafelki "Top tygodnia"/"Top miesiąca" (miejsca 4+),
sekcja "Więcej o [tag]" pod postem (_render_related_posts() w posts-render.php),
i jako baza pod .chart-podium-card (miejsca 1-3, patrz niżej) — jedna definicja
wyglądu/hover, żeby te trzy miejsca nie rozjeżdżały się wizualnie z czasem. */
/* Celowo bez transition/transform/box-shadow na hover — w serwisie nie
używamy żadnych animowanych efektów (decyzja użytkownika, 2026-07-23). */
.content-tile {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--btn-radius);
overflow: hidden;
text-decoration: none;
}
.content-tile:hover {
border-color: var(--accent);
}
.content-tile-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg-secondary);
flex-shrink: 0;
}
.content-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-tile-body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.content-tile-title {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
color: var(--text-main);
display: flex;
align-items: flex-start;
gap: 6px;
}
.content-tile-title .post-title-icon--clip { flex-shrink: 0; margin-top: 2px; }
.content-tile-excerpt {
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.content-tile-meta {
display: flex;
gap: 14px;
font-size: 0.78rem;
color: var(--text-muted);
margin-top: auto;
padding-top: 4px;
}
.content-tile-meta span { display: inline-flex; align-items: center; gap: 4px; }
/* Siatka 3 kolumny — współdzielona przez podium i "zwykłe" kafelki (miejsca 4+). */
.chart-tiles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 28px;
}
/* ----- Podium (miejsca 1-3) — dokłada się do .content-tile -----
Kolor rangi (złoto/srebro/brąz) to główny sposób wyróżnienia czołówki. Nie
przełącza się na akcent przy hover jak zwykłe kafelki — kolor ramki jest
tu stałym oznaczeniem rangi, nie zwykłym stanem hover linku. */
.chart-podium-card {
border-top: 4px solid var(--border-color);
}
.chart-podium-card:hover {
border-color: var(--border-color);
}
.chart-podium-card--rank1 { border-top-color: #e8b923; }
.chart-podium-card--rank2 { border-top-color: #a9adb4; }
.chart-podium-card--rank3 { border-top-color: #b3742c; }
.chart-podium-card--rank1:hover { border-top-color: #e8b923; }
.chart-podium-card--rank2:hover { border-top-color: #a9adb4; }
.chart-podium-card--rank3:hover { border-top-color: #b3742c; }
/* Odznaka rangi — neutralna szarość domyślnie (zwykłe kafelki, miejsca 4+),
kolorowana wg miejsca TYLKO wewnątrz .chart-podium-card (miejsca 1-3). */
.content-tile-rank {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
min-width: 30px;
height: 30px;
padding: 0 8px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 800;
color: #fff;
background: rgba(0,0,0,.55);
}
.chart-podium-card--rank1 .content-tile-rank { background: #e8b923; color: #3a2c00; }
.chart-podium-card--rank2 .content-tile-rank { background: #a9adb4; color: #26282b; }
.chart-podium-card--rank3 .content-tile-rank { background: #b3742c; color: #fff; }
/* Bez zdjęcia karta zaczyna się od razu treścią — rank-badge zostaje w
naturalnym przepływie (position:static), nie overlay na niczym. */
.content-tile:not(:has(.content-tile-media)) .content-tile-rank {
position: static;
align-self: flex-start;
margin: 12px 0 -2px 16px;
}
.chart-podium-card--rank1 .content-tile-title { font-size: 1.05rem; }
@media (max-width: 768px) {
.chart-tiles-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
.chart-tiles-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
17c. NAVBAR MOBILE — hamburger (≤768px)
Linki drugorzędne (Bądź na bieżąco / Top tygodnia / Newsletter / Ulubione /
Wyloguj-na-mobile) chowają się pod przyciskiem-hamburgerem zamiast zawijać
się w bałagan — w pasku zostaje tylko dzwonek+avatar (albo Zaloguj/Dołącz
dla gościa) + hamburger, przylegające do prawej krawędzi, logo do lewej
(.navbar .container ma już justify-content:space-between). Otwieranie/
zamykanie panelu jest natychmiastowe (display none/flex), bez animacji —
zgodnie z zasadą braku animowanych efektów.
========================================================================== */
@media (max-width: 768px) {
.navbar-toggle { display: flex; }
/* "Cześć, {username}" i tak nie mieści się w wąskim pasku — ukryte na całym
zakresie hamburgera, nie tylko ≤576px jak wcześniej (patrz sekcja 18). */
.user-welcome { display: none; }
.navbar-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--bg-main);
border-bottom: 1px solid var(--border-color);
padding: 8px 15px;
}
.navbar-links.navbar-links--open { display: flex; }
.navbar-links a,
.navbar-links button {
padding: 12px 4px;
border-bottom: 1px solid var(--border-color);
text-align: left;
width: 100%;
}
.navbar-links a:last-child,
.navbar-links button:last-child { border-bottom: none; }
/* Kopia "Wyloguj" w panelu — reset stylu "separatora obok avatara"
(border-left/padding-left z .logout-link), bo tu jest pełnoszerokim
wierszem listy, nie elementem w poziomym rzędzie. */
.navbar-links .logout-link { border-left: none; padding-left: 4px; }
.h1-subtitle {
font-size: 0.5rem;
}
}
/* ==========================================================================
18. MOBILE (≤576px)
========================================================================== */
@media (max-width: 576px) {
body { padding-top: 90px; }
h1 { font-size: 1.2rem; }
/* Navbar */
.navbar { min-height: 80px; }
.navbar-logo { height: 26px; width: 26px; }
.navbar-brand h1 { font-size: 1.2rem; }
/* Auth — .favorites-link/.newsletter-trigger/.logout-link mieszkają teraz
w #navbar-links (sekcja 17c ma ich mobilny styl), zostaje tylko
Zaloguj/Dołącz (gość) w .auth-box, więc auth-box nie potrzebuje już
width:100% (to był relikt sprzed hamburgera). */
.login-link { font-size: 0.85rem; }
.btn-join { padding: 9px 18px; font-size: 0.75rem; border-width: 1px; }
/* Wyszukiwarka */
.search-section { padding: 20px 0; min-height: 145px; }
h2.search-title { display: none; }
.filter-group span { display: none; }
/* Przyciski kategorii — jeden rząd zawsze, przewijany w poziomie zamiast
zawijać się na kolejną linię (np. "Podcast" osobno). flex-shrink:0 na
.cat-item, żeby flexbox przewijał zamiast ściskać etykiety. Pasek
przewijania ukryty (scrollbar-width/::-webkit-scrollbar) — to sama
możliwość przewinięcia ma się liczyć, nie jego wizualny pasek. */
.filter-group {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filter-group::-webkit-scrollbar { display: none; }
.cat-item { flex-shrink: 0; }
.cat-item label { white-space: nowrap; }
/* Breadcrumbs — czysto wizualny element (dane BreadcrumbList w schema.org,
breadcrumbs.php, renderują się osobno jako JSON-LD i nie znikają razem
z tym), na wąskim ekranie to głównie powtórzenie tytułu posta zaraz
nad H1 — więcej bałaganu niż pożytku, więc znika. */
.breadcrumb-container { display: none; }
/* Feed */
.main-feed { padding: 0 0 100px; }
.post-card { padding: 25px 0; }
.post-flex { flex-direction: column-reverse; }
.post-image-container { width: 100%; height: 200px; }
.post-title { font-size: 1.2rem; line-height: 1.75rem; }
.post-title-icon svg { width: 16px; height: 16px; }
h1.post-title .post-title-icon svg { width: 18px; height: 18px; }
.post-hero { aspect-ratio: 16 / 9; margin: 8px 0 12px; }
.post-hero--single { aspect-ratio: unset; }
.post-date-top { font-size: 0.6rem; }
.stats-container { margin-top: 1px; width: 70%; gap: 10%; }
.post-title-icon--clip { display: none; }
.comment-field-row { grid-template-columns: 1fr; }
.comment-form-footer { flex-direction: column; align-items: flex-start; }
.comment-form-wrap { padding: 18px; }
.comment-item { gap: 10px; }
.comment-avatar,
.comment-avatar-placeholder { width: 30px; height: 30px; }
/* Przyciski */
.btn-action { padding: 8px; }
.btn-audio { padding: 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; letter-spacing: 0; }
.btn-audio .icon { margin-right: 0; font-size: 8px; }
/* Wideo – modal */
.video-overlay { padding: 15px; }
.video-modal-title { font-size: 0.78rem; }
.close-video { top: -36px; font-size: 1.7rem; }
/* Wideo – chart */
.video-chart-item { padding: 8px 12px; gap: 8px; }
.chart-thumb-wrap { width: 64px; height: 36px; }
.chart-track { font-size: 0.75rem; }
.chart-views { display: none; }
/* Strony prawne */
.legal-content h2 { font-size: 1.3rem; }
.legal-content h3 { font-size: 1.15rem; }
.legal-card { padding: 25px; }
/* Powiązane posty */
.related-posts-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.related-posts-grid .content-tile-body { padding: 10px 12px; }
.related-posts-grid .content-tile-title { font-size: 0.78rem; -webkit-line-clamp: 2; }
/* Top tygodnia */
.chart-page-title { font-size: 1.4rem; }
/* Stopka mobilna */
.footer-mobile {
position: fixed;
bottom: 0; left: 0;
width: 100%;
z-index: 9998;
background: rgba(250, 249, 245, 0.95);
backdrop-filter: blur(10px);
transition: transform 0.3s ease-in-out;
min-height: 60px;
}
.footer-nav { flex-wrap: wrap; justify-content: center; gap: 10px; }
}
/* ==========================================================================
19. SMALL MOBILE (≤380px)
========================================================================== */
@media (max-width: 380px) {
body { padding-top: 85px; }
/* Navbar */
.navbar { min-height: 75px; padding: 6px 0 10px; }
.navbar .container { padding: 0 10px; }
.navbar-logo { height: 22px; width: 22px; }
.navbar-brand h1,
.brand-h1-text { font-size: 1rem; letter-spacing: -1px; }
/* Auth */
.auth-box { gap: 8px; min-width: auto; }
.btn-join { padding: 7px 12px; font-size: 0.65rem; }
.login-link { font-size: 0.75rem; }
/* Wyszukiwarka */
.search-section { padding: 17px 0 10px 0; min-height: 120px; }
#main-search { padding: 11px 14px; font-size: 0.9rem; }
.cat-item label { padding: 5px 10px; font-size: 0.72rem; }
.filter-group { gap: 4px; margin-top: 14px; }
.filter-group span { display: none; }
/* Feed */
.post-card { padding: 18px 0; }
.post-title { font-size: 1.05rem; line-height: 1.75; }
.post-hero { aspect-ratio: 4 / 3; margin: 6px 0 10px; }
.post-hero--single { aspect-ratio: unset; }
.post-desc { font-size: 0.9rem; }
.post-desc.single,
.long-content-inner p { font-size: 0.9rem; }
.post-image-container { height: 160px; }
.long-content-inner h2 { font-size: 1rem; }
.klip-hero-grid { grid-template-columns: 1fr; }
.klip-hero-main { border-right: none; border-bottom: 1px solid var(--border-color); }
.klip-hero-side { flex-direction: row; overflow-x: auto; padding: 8px; gap: 8px; }
.klip-mini-card { flex-direction: column; min-width: 110px; padding: 0; border-bottom: none; }
.klip-mini-thumb { width: 100%; }
.klip-mini-title { padding: 5px 2px; -webkit-line-clamp: 2; line-clamp: 2; }
/* Odznaki i tagi */
.badge-tag { font-size: 0.55rem; padding: 5px 8px 3px; }
.tag-item { font-size: 10px; padding: 5px 7px 2px; }
/* Statystyki */
.stats-container { padding: 7px 10px; gap: 10%; }
.heart-svg, .view-svg, .fire-svg, .share-svg { width: 15px; height: 15px; }
.stat-num { font-size: 0.72rem; }
/* Breadcrumbs: ukryte już całkowicie od ≤576px (sekcja 18) — nie ma czego
tu jeszcze doprecyzowywać. */
/* Przyciski */
.btn-action { font-size: 0.65rem; padding: 9px 10px; }
/* Strony prawne */
.legal-card { padding: 18px; }
.legal-content h2 { font-size: 1.3rem; margin-bottom: 20px; }
.legal-content h3 { font-size: 1.05rem; }
.legal-content p,
.legal-content li { font-size: 0.9rem; }
/* Modale */
.newsletter-modal,
.auth-card { padding: 25px 20px; }
/* Share */
.share-icon-link i { width: 38px; height: 38px; font-size: 1rem; }
.share-icon-link span { font-size: 0.5rem; }
/* Stopka */
.footer-nav { gap: 8px; }
.footer { font-size: 0.68rem; }
}
/* ==========================================================================
20. TRYB CIEMNY
========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
--bg-main: #0f0f0f;
--bg-secondary: #161616;
--border-color: #262626;
--text-main: #e5e5e5;
--text-muted: #868686;
--accent: #a5a5a5;
}
body { background-color: var(--bg-main); }
.h1-subtitle,
button.btn-link-style,
.login-link, .favorites-link, .newsletter-trigger { color: var(--accent); }
/* Navbar */
.navbar { background: rgba(15, 15, 15, 0.9); border-bottom-color: var(--border-color); }
.brand-h1-text,
.navbar-brand h1 { color: var(--accent); }
/* Wyszukiwarka */
#main-search { background: #1a1a1a; border-color: var(--border-color); color: var(--accent); }
#main-search::placeholder { color: var(--text-muted); }
#main-search:focus { border-color: var(--accent); }
/* Filtry */
.cat-item label { background: var(--bg-secondary); border-color: var(--border-color); color: var(--accent); }
.cat-item label:hover { background: var(--text-muted); color: var(--bg-main); }
.cat-item input:checked + label { background: var(--accent); color: var(--bg-secondary); border-color: var(--accent); }
/* Feed */
.post-title a { color: var(--accent); }
.post-title-icon--clip { color: var(--active-btn); opacity: 1; }
.post-hero { outline-color: var(--border-color); background: var(--bg-secondary); }
.post-hero-img { filter: brightness(0.88) saturate(0.9); }
.post-card { border-bottom-color: var(--border-color); }
.post-date-top { font-size: 0.5rem; }
.post-desc.single,
.long-content-inner,
.long-content-inner h2,
.long-content-inner h3,
.long-content-inner p { color: var(--accent); }
/* Odznaki i tagi */
.badge-tag { border-color: var(--border-color); color: var(--text-muted); }
.badge-tag:hover { background: var(--accent); color: var(--bg-main); border-color: var(--accent); }
.tag-item { background: rgba(255, 255, 255, 0.1); }
.tag-item:hover { background: var(--accent); color: var(--bg-main); }
/* Statystyki */
.stat-num { color: var(--accent); }
/* Przyciski */
.btn-action { border-color: var(--accent); color: var(--accent); }
.btn-action:hover { background: var(--accent); color: var(--bg-main); }
button.btn-link-style.btn-join,
.btn-join { background: var(--accent); color: var(--bg-main) !important; border-color: var(--accent); }
.login-link:hover { color: var(--accent); }
/* Wideo – chart */
.video-chart { background: var(--bg-secondary); border-color: var(--border-color); }
.video-chart-header { border-bottom-color: var(--border-color); }
.video-chart-item { border-bottom-color: var(--border-color); }
.video-chart-item:hover { background: var(--bg-main); }
.comment-form-wrap { background: var(--bg-secondary); border-color: var(--border-color); }
.comment-field input,
.comment-field textarea { background: var(--bg-main); border-color: var(--border-color); color: var(--text-main); }
.comment-report-card { background: var(--bg-secondary); border-color: var(--border-color); }
.comments-count-badge { background: var(--bg-secondary); border-color: var(--border-color); }
.comment-svg { stroke: var(--text-muted); }
/* Audio */
.audio-player-container { background: var(--bg-secondary); border-color: var(--border-color); }
/* Toast */
.custom-toast { background: var(--accent); color: var(--bg-main); }
/* Modale */
.newsletter-modal,
.auth-card { background: var(--bg-secondary); border-color: var(--border-color); }
.newsletter-modal input[type="text"],
.newsletter-modal input[type="email"],
.newsletter-modal textarea,
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
background: var(--bg-main) !important;
border-color: var(--border-color) !important;
color: var(--text-main) !important;
}
.modal-title { color: var(--accent) !important; }
.klip-hero-section { background: var(--bg-secondary); border-color: var(--border-color); }
.klip-mini-card:hover { background: var(--bg-main); }
.btn-submit,
.auth-overlay .btn-action { background: var(--accent); color: var(--bg-main); }
.btn-submit:hover,
.auth-overlay .btn-action:hover { background: var(--text-muted); }
/* Share */
.share-icon-link i { background: var(--bg-secondary); border-color: var(--border-color); color: var(--accent); }
/* Stopka */
.footer { background: var(--bg-main); border-top-color: var(--border-color); }
.footer-mobile { background: rgba(15, 15, 15, 0.95); }
/* Strony prawne */
.legal-card { background: var(--bg-secondary); border-color: var(--border-color); }
.legal-content h2 { color: var(--accent); }
.legal-content h3,
.legal-content p,
.legal-content li { color: var(--accent); }
/* Cookie Consent */
#cc--main .cm { background: var(--bg-secondary) !important; }
}
/* ==========================================================================
FEED — UKŁAD 2 KOLUMNY (desktop ≥ 993px)
--------------------------------------------------------------------------
Aktywne tylko na listingach oznaczonych klasą .feed-grid
(index.php, favorites.php). Pojedynczy post (post.php) NIE ma tej klasy,
więc pozostaje jednokolumnowy na całą szerokość.
Mobile i tablet (< 993px) bez zmian — jedna kolumna.
========================================================================== */
@media (min-width: 993px) {
.main-feed.feed-grid {
max-width: 1140px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 34px;
align-items: stretch; /* obie karty w wierszu = ta sama wysokość */
}
/* Elementy na całą szerokość obu kolumn:
hero „Top klip tygodnia" (), puste stany, loader startowy.
Wszystko, co NIE jest kartą .post-card, spina obie kolumny,
dzięki czemu pary kart nigdy się nie łamią. */
.main-feed.feed-grid > *:not(.post-card) {
grid-column: 1 / -1;
}
/* Karta jako kolumna flex → pasek akcji przypięty do dołu.
!important jest konieczne: pasek ma klasę Bootstrapa .mt-3
(margin-top: 1rem !important), którą trzeba nadpisać.
To wyrównuje przyciski i dolne linie separatorów w całym wierszu,
nawet gdy jedna karta ma mniej treści (np. bez zdjęcia). */
.main-feed.feed-grid > .post-card {
display: flex;
flex-direction: column;
}
.main-feed.feed-grid > .post-card .post-actions {
margin-top: auto !important;
}
/* Hero 16:9 w węższej kolumnie (zamiast szerokiego 21:9 z jednej kolumny) */
.main-feed.feed-grid > .post-card .post-hero {
aspect-ratio: 16 / 9;
}
/* Opis: maksymalnie 5 linii → równe rzędy, brak poszarpanych wysokości */
.main-feed.feed-grid > .post-card .post-desc {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Tytuł: stała wysokość = 2 linie (min-height + clamp).
Dzięki temu, mimo różnej długości tytułów, hero i opis
obu kart w wierszu startują na tej samej wysokości. */
.main-feed.feed-grid > .post-card:not(.post-card--featured) .post-title {
min-height: calc(1.4rem * 1.2 * 2); /* 2 × (font-size × line-height) */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Pasek statystyk: rozciągnięty prawie do przycisku (odstęp 10px),
przypięty na stałej wysokości nad dolną linią karty (margin-top:auto).
Przycisk zachowuje swoją naturalną szerokość. */
.main-feed.feed-grid > .post-card .post-actions {
gap: 10px;
}
.main-feed.feed-grid > .post-card .stats-container {
flex: 1 1 auto; /* pasek wypełnia dostępną szerokość */
width: auto; /* nadpisuje bazowe width:60% */
justify-content: space-around; /* równomierne rozłożenie liczników */
gap: 12px;
}
.main-feed.feed-grid > .post-card .btn-action {
flex: 0 0 auto;
}
}
/* ==========================================================================
SKELETON LOADERY (shimmer)
--------------------------------------------------------------------------
Szkielet karty jest elementem .post-card (klasa .skeleton-card), więc
dziedziczy układ kart i automatycznie wpada w siatkę 2 kolumn na desktopie
oraz w jedną kolumnę na mobile. Wymiary bloków odpowiadają realnej karcie
(tytuł 2 linie, hero 16:9, pasek akcji), żeby podmiana szkielet → treść
nie powodowała przeskoku układu.
========================================================================== */
:root{
--sk-base:#e7e4db;
--sk-shine:#f5f3ed;
}
@keyframes sk-shimmer{
0% { background-position: 160% 0; }
100% { background-position: -160% 0; }
}
.sk{
display:block;
border-radius:var(--btn-radius);
background:linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 50%, var(--sk-base) 75%);
background-size:200% 100%;
animation:sk-shimmer 1.5s ease-in-out infinite;
}
/* Uszanowanie systemowej preferencji ograniczenia ruchu */
@media (prefers-reduced-motion: reduce){
.sk{ animation:none; background:var(--sk-base); }
}
/* Rozmieszczenie bloków wewnątrz szkieletu karty */
.skeleton-card .post-meta-top{ margin-bottom:14px; }
.sk-badge{ width:64px; height:20px; }
.sk-date{ width:96px; height:12px; }
.sk-title{ margin-bottom:14px; display:flex; flex-direction:column; gap:7px; }
.sk-title .sk{ height:20px; }
.sk-hero{ width:100%; aspect-ratio:16 / 9; margin:10px 0 14px; }
.sk-desc{ display:flex; flex-direction:column; gap:9px; }
.sk-desc .sk{ height:12px; }
.sk-tags{ margin-top:14px; display:flex; gap:8px; }
.sk-tags .sk{ height:22px; }
/* Pasek akcji szkieletu — poziomy niezależnie od klas Bootstrapa */
.skeleton-card .post-actions{ display:flex; align-items:center; gap:10px; }
.sk-stats{ flex:1 1 auto; height:38px; }
.sk-btn{ width:96px; height:38px; flex:0 0 auto; }