/* ===================================================== THEME SYSTEM (dark / light) Sterowany przez: ===================================================== */ #app-background { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-size: 1000% 1000%; animation: bgShift 22s ease-in-out infinite; } /* 🌙 DARK MODE – sport + data */ [data-theme="dark"] #app-background { background-image: radial-gradient(55% 55% at 15% 20%, rgba(30,107,255,0.18), transparent 60%), radial-gradient(55% 55% at 85% 25%, rgba(225,6,0,0.14), transparent 60%), radial-gradient(70% 70% at 50% 85%, rgba(30,107,255,0.10), transparent 70%), linear-gradient(180deg, #0b0f1a 0%, #070a12 100%); } /* ☀️ LIGHT MODE – czysto, analitycznie */ [data-theme="light"] #app-background { background-image: radial-gradient(60% 60% at 20% 20%, rgba(30,107,255,0.14), transparent 60%), radial-gradient(60% 60% at 80% 30%, rgba(225,6,0,0.10), transparent 60%), linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%); } /* 🎞 subtelny ruch */ @keyframes bgShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #app-background::after { content: ""; position: absolute; inset: 0; background-image: url("/assets/img/noise.png"); opacity: 0.03; pointer-events: none; } /* ---------- LIGHT (default) ---------- */ :root { --bg-main: #ffffff; --bg-section: #f8f9fa; --bg-card: #ffffff; --bg-soft: #eef1f5; --bg-hero: #f1f3f5; --text-main: #111111; --text-muted: #6c757d; --border-color: #dee2e6; --primary: #dc3545; } /* ---------- DARK ---------- */ html[data-theme="dark"] { --bg-main: #0f1115; --bg-section: #141821; --bg-card: #1b1f2a; --bg-soft: #12151b; --bg-hero: #0f1115; --text-main: #eaeaf0; --text-muted: #9aa0a6; --border-color: #2a2f38; --primary: #dc3545; } /* ===================================================== BASE ===================================================== */ body { background: var(--bg-main); color: var(--text-main); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* ========================= TABLE – THEME AWARE ========================= */ .table-theme thead th { font-weight: 600; } /* LIGHT */ html[data-theme="light"] .table-theme { background-color: #ffffff; color: #212529; } html[data-theme="light"] .table-theme thead { background-color: #f1f3f5; } html[data-theme="light"] .table-theme td, html[data-theme="light"] .table-theme th { border-color: #dee2e6; } /* DARK */ html[data-theme="dark"] .table-theme { background-color: #1e1e1e; color: #e9ecef; } html[data-theme="dark"] .table-theme thead { background-color: #2a2a2a; } html[data-theme="dark"] .table-theme td, html[data-theme="dark"] .table-theme th { border-color: #3a3a3a; } html[data-theme="dark"] .table-theme tbody tr:hover { background-color: rgba(255,255,255,0.04); } html[data-theme="light"] .table-highlight { background-color: #fff3cd; } html[data-theme="dark"] .table-highlight { background-color: rgba(255, 193, 7, 0.12); } /* ===================================================== SECTIONS & SPACING ===================================================== */ .section { padding: 5rem 0; background: var(--bg-section); } .section-sm { padding: 3rem 0; } .section-hero { padding: 6rem 0; background: linear-gradient( 180deg, var(--bg-hero), var(--bg-section) ); } /* ===================================================== CARDS ===================================================== */ .card, .card-ui { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; color: var(--text-main); padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; } .card-ui { position: relative; background: var(--card-bg); box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); } [data-theme="dark"] .card-ui { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 28px rgba(30,107,255,0.04), 0 0 18px rgba(225,6,0,0.03); } [data-theme="light"] .card-ui { box-shadow: 0 0 22px rgba(30,107,255,0.06), 0 0 14px rgba(225,6,0,0.04); } .card-ui:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.12); } .glow-accent { position: relative; } [data-theme="dark"] .glow-accent { box-shadow: 0 0 22px rgba(225,6,0,0.18), 0 0 38px rgba(30,107,255,0.14); } [data-theme="light"] .glow-accent { box-shadow: 0 0 18px rgba(225,6,0,0.20), 0 0 30px rgba(30,107,255,0.16); } .table-ui tr.is-top { background: linear-gradient( 90deg, rgba(225,6,0,0.06), rgba(30,107,255,0.06) ); } [data-theme="dark"] .table-ui tr.is-top { box-shadow: inset 0 0 18px rgba(30,107,255,0.12); } /* ===================================================== TYPOGRAPHY & HELPERS ===================================================== */ .muted, .text-muted { color: var(--text-muted) !important; } .stat-number { font-size: 2.6rem; font-weight: 800; letter-spacing: -1px; color: var(--primary); } /* ===================================================== BUTTONS ===================================================== */ .btn { border-radius: 10px; font-weight: 600; } .btn-danger { background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px rgba(220,53,69,.35); } /* ===================================================== BADGES ===================================================== */ .badge { font-size: .7rem; letter-spacing: .05em; padding: .4em .7em; border-radius: 999px; } .badge-premium { background: var(--primary); color: #fff; } /* ===================================================== NAVBAR – CLEAN VERSION (MOBILE SAFE) ===================================================== */ /* ========================= BASE ========================= */ .navbar-main { position: sticky; top: 0; z-index: 1100; /* NAD WSZYSTKIM */ height: 64px; padding: 0 .75rem; background: var(--bg-soft); border-bottom: 1px solid var(--border-color); } .navbar-main .nav-link { color: var(--text-main); font-weight: 500; padding: .45rem .75rem; border-radius: 6px; transition: background-color .15s ease, color .15s ease; } /* ========================= HOVER / ACTIVE (DESKTOP) ========================= */ @media (hover:hover) { .navbar-main .nav-link:hover { background-color: rgba(0,0,0,0.05); box-shadow: inset 0 -2px 0 var(--accent-color, #17a2b8); } [data-theme="dark"] .navbar-main .nav-link:hover { background-color: rgba(255,255,255,0.08); } } .navbar-main .nav-link.active { font-weight: 600; background-color: rgba(0,0,0,0.06); } [data-theme="dark"] .navbar-main .nav-link.active { background-color: rgba(255,255,255,0.12); } /* ========================= DROPDOWN (DESKTOP) ========================= */ .navbar-main .dropdown-menu { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,.18); border-radius: 12px; padding: .4rem 0; z-index: 2000; /* dropdown nad collapse */ } .navbar-main .dropdown-item { padding: .5rem 1rem; font-size: .9rem; color: var(--text-main); } .navbar-main .dropdown-item:hover { background: rgba(0,0,0,0.05); } [data-theme="dark"] .navbar-main .dropdown-item:hover { background: rgba(255,255,255,0.08); } /* ========================= HAMBURGER (DUŻY I WYGODNY) ========================= */ .navbar-toggler-custom { font-size: 30px; padding: 12px 18px; border: none; } .navbar-toggler-custom:focus { outline: none; box-shadow: none; } /* ===================================================== MOBILE MENU – STABILNE I NAD WSZYSTKIM ===================================================== */ @media (max-width: 991.98px) { .navbar-collapse.show { position: absolute; top: 100%; left: 0; width: 100%; z-index: 9999; background: var(--bg-soft); padding: 20px; } .navbar-nav .nav-link { font-size: 18px; padding: 14px 0; } /* dropdown w mobile */ .navbar-main .dropdown-menu { position: static; float: none; box-shadow: none; border: none; background: transparent; padding-left: 10px; } .navbar-main .dropdown-item { font-size: 16px; padding: 10px 0; } /* usuń hover-boxshadow z mobile */ .navbar-main .nav-link:hover { box-shadow: none; } } /* ===================================================== HAMBURGER – THEME SAFE EXTENSION ===================================================== */ .navbar-toggler-custom { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-main); transition: background .2s ease, color .2s ease; } .navbar-toggler-custom:hover { background: rgba(0,0,0,0.05); } [data-theme="dark"] .navbar-toggler-custom:hover { background: rgba(255,255,255,0.08); } /* aktywny stan po otwarciu menu */ .navbar-toggler[aria-expanded="true"] { background: var(--accent-color, #17a2b8); color: #fff; border-color: var(--accent-color, #17a2b8); } /* ========================= SIDEBAR STICKY (DESKTOP) ========================= */ .sidebar-col { position: relative; } .sidebar { position: sticky; top: 80px; /* navbar + margines */ } .sidebar a.active { background: rgba(220,53,69,.15); border-radius: 8px; } .sidebar .nav-link.active { background: rgba(220,53,69,.15); border-radius: 8px; font-weight: 600; } /* ========================= SIDEBAR MOBILE OFFCANVAS ========================= */ @media (max-width: 991px) { .sidebar-mobile { position: fixed; top: 64px; left: -260px; width: 260px; height: calc(100vh - 64px); background: var(--bg-card); z-index: 1040; transition: left .25s ease; overflow-y: auto; padding: 1rem; border-right: 1px solid var(--border-color); } .sidebar-mobile.open { left: 0; } body.sidebar-open { overflow: hidden; } } /* ===================================================== SKELETON / LOADING ===================================================== */ .skeleton { background: linear-gradient( 90deg, var(--bg-soft), var(--bg-card), var(--bg-soft) ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .blurred { filter: blur(4px); opacity: .6; pointer-events: none; } .paywall-box { position: relative; border: 1px dashed var(--border-color); border-radius: 14px; padding: 2rem; text-align: center; background: var(--bg-card); } .blurred-box { filter: blur(6px); opacity: .4; } .paywall-cta { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,.45); color: #fff; border-radius: 14px; } /* ========================= TABLE UI (LIGHT / DARK) ========================= */ .table-ui { width: 100%; color: var(--text-main); background: transparent; } .table-ui thead th { border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-weight: 600; font-size: .85rem; } .table-ui tbody td { border-top: 1px solid var(--border-color); color: var(--text-main); } .table-ui tbody tr:hover { background: rgba(220, 53, 69, 0.08); } /* DARK MODE FIX */ html[data-theme="dark"] .table-ui { background: transparent; } html[data-theme="dark"] .table-ui tbody tr:hover { background: rgba(255, 255, 255, 0.04); } /* ========================= NEWS SLIDER ========================= */ .news-slider { border-radius: 20px; overflow: hidden; } .news-slide { position: relative; display: block; color: #fff; text-decoration: none; } .news-slide-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } /* overlay */ .news-slide-overlay { position: absolute; inset: 0; padding: 3rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient( to top, rgba(0,0,0,.85), rgba(0,0,0,.25) ); } .news-slide h2 { font-weight: 800; margin-bottom: .75rem; } .news-slide p { max-width: 70%; opacity: .9; } /* MOBILE */ @media (max-width: 992px) { .news-slide-overlay { padding: 1.5rem; } .news-slide p { max-width: 100%; } } /* ========================= NEWS LIST THUMBNAILS ========================= */ .news-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--bg-card); } .news-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .news-excerpt { font-size: .95rem; line-height: 1.45; margin-top: .5rem; } .news-hero { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; } .news-hero img { width: 100%; height: 100%; object-fit: cover; } /* lekki hover */ .card-ui:hover .news-thumb img { transform: scale(1.04); } /* ===== ARTICLE ===== */ .article-hero { width: 75%; max-width: 1100px; margin: 2rem auto; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.25); position: relative; } .article-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .article-hero:hover img { transform: scale(1.05); } .article-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,.05), rgba(0,0,0,.45) ); pointer-events: none; } @media (max-width: 768px) { .article-hero { width: 100%; border-radius: 0; margin: 0 -15px 1.5rem; } } .article-container { max-width: 860px; margin-top: -60px; background: var(--bg-card); border-radius: 16px; padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,.15); } .article-meta { margin-bottom: 1rem; } .article-title { font-size: 2.2rem; font-weight: 800; line-height: 1.25; margin-bottom: 1.5rem; } .article-lead { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 2rem; } .article-content { font-size: 1.05rem; line-height: 1.75; } .article-content img { max-width: 95%; height: auto; border-radius: 12px; margin: 1.5rem 0; } .article-content h2, .article-content h3 { margin-top: 2.5rem; font-weight: 700; } article.card-ui img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; } /* ========================= RECORDS KONTENER ========================= */ .records-container { max-width: 1200px; margin: 0 auto; padding: 0 12px; } .records-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.06); padding: 12px; } /* ========================= RECORDS TABLE ========================= */ .records-table { background-color: var(--bg-card); color: var(--text-primary); } .records-table thead th { border-bottom: 2px solid var(--border-color); color: var(--text-secondary); } .records-table tbody tr:hover { background-color: var(--bg-hover); } .records-table td, .records-table th { border-top: 1px solid var(--border-color); } /* ========================= PROGRESJA – THEME SAFE ========================= */ /* Tabela progresji */ .progression-table { table-layout: fixed; width: 100%; background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } /* Nagłówki */ .progression-table thead th { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); font-weight: 600; border-bottom: 2px solid var(--bs-border-color); } /* Komórki */ .progression-table td, .progression-table th { border-color: var(--bs-border-color); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hover tylko w progresji */ .progression-table tbody tr:hover { background-color: var(--bs-secondary-bg); } /* szerokości kolumn */ .progression-table .col-result { width: 90px; } .progression-table .col-athlete { width: 240px; } .progression-table .col-club { width: 220px; } .progression-table .col-date { width: 110px; } .progression-table .col-city { width: 160px; } /* Wiersz kontenera progresji (pod rekordem) */ .progression-row { background-color: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); } /* Padding w kontenerze */ .progression-row td { padding: 1rem 1.25rem; } /* ===== BLUR DLA NON-PREMIUM ===== */ .progression-blur-wrapper { position: relative; } /* rozmycie */ .progression-blur { filter: blur(4px); pointer-events: none; user-select: none; } /* overlay z komunikatem */ .progression-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(var(--bs-body-bg-rgb), 0.85); color: var(--bs-body-color); text-align: center; font-weight: 600; z-index: 2; backdrop-filter: blur(2px); } /* ===== WYKRES ===== */ .progression-chart { margin-top: 1rem; } /* ===== MOBILE ===== */ @media (max-width: 768px) { .progression-table th, .progression-table td { font-size: 0.875rem; padding: 0.4rem; } .progression-row td { padding: 0.75rem; } } /* === ATHLETE CARD === */ .athlete-card { display: flex; gap: 24px; padding: 24px; border-radius: 16px; background: var(--card-bg); box-shadow: 0 10px 30px rgba(0,0,0,.08); align-items: center; } .athlete-photo { position: relative; width: 180px; height: 180px; flex-shrink: 0; } .athlete-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--border-color); } .club-logo { position: absolute; bottom: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--border-color); } .athlete-info h3 { margin: 0; font-size: 22px; } .athlete-info .year { font-weight: normal; color: var(--text-muted); font-size: 16px; } .athlete-info .club { margin: 4px 0 12px; color: var(--text-muted); } .athlete-info .desc { max-width: 420px; font-size: 14px; } .athlete-info .actions { margin-top: 16px; display: flex; gap: 12px; } /* avatar zawodnika */ .athlete-avatar { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; border: 3px solid #2a2f38; } /* ========================= ATHLETE STARTS TABLE ========================= */ .athlete-starts { font-size: 0.85rem; } /* ========================= TABLE HEADER ========================= */ /* LIGHT */ html[data-theme="light"] .athlete-starts thead th, body:not([data-theme]) .athlete-starts thead th { background-color: #f8f9fa; color: #212529; border-color: #dee2e6; } /* DARK */ html[data-theme="dark"] .athlete-starts thead th { background-color: #1f2933; color: #e5e7eb; border-color: #374151; } /* ========================= TABLE BODY ========================= */ /* LIGHT */ html[data-theme="light"] .athlete-starts tbody td, body:not([data-theme]) .athlete-starts tbody td { background-color: #ffffff; color: #212529; border-color: #dee2e6; } /* DARK */ html[data-theme="dark"] .athlete-starts tbody td { background-color: #111827; color: #e5e7eb; border-color: #374151; } /* ========================= ROW HOVER ========================= */ html[data-theme="light"] .athlete-starts tbody tr:hover td { background-color: #f1f3f5; } html[data-theme="dark"] .athlete-starts tbody tr:hover td { background-color: #1f2933; } /* ========================= BEST ATTEMPTS (RW / POD) ========================= */ .athlete-starts td.best { font-weight: 600; } /* DARK */ html[data-theme="dark"] .athlete-starts td.best { color: var(--accent-color, #8ddcff); } /* LIGHT */ html[data-theme="light"] .athlete-starts td.best { color: #0d6efd; } [data-theme="dark"] .progress { background-color: #1f2933; } [data-theme="dark"] .progress-bar { background-color: var(--accent-color, #3b82f6); } /* ========================= ATTEMPTS (I / II / III) ========================= */ .athlete-starts td.attempt { opacity: 0.85; } /* blok klubu */ .club { font-size: 0.95rem; color: #cfd3da; } /* logo klubu */ .club-logo-wrap { display: flex; align-items: center; } .club-logo-img { max-width: 70px; max-height: 40px; object-fit: contain; opacity: 0.9; } /* nazwa klubu */ .club-name { font-weight: 600; } #fav-athlete-btn { font-size: 20px; line-height: 1; } #fav-athlete-btn.active { color: #f0ad4e; } /* MOBILE */ @media (max-width: 768px) { .athlete-card { flex-direction: column; text-align: center; } .club { justify-content: center; text-align: center; } } /* ========================= RANKING TABLE – BASE ========================= */ :root { --rank-bg: #ffffff; --rank-bg-alt: #f5f5f5; --rank-text: #222; --rank-border: #e0e0e0; --rank-hover: #dceeff; --rank-head-bg: #123456; --rank-head-text: #ffffff; --table-head: #233f5c; --table-row-alt: #f5f5f5; --text-inverse: #fff; --border-color: #ddd; } [data-theme="dark"] { --rank-bg: #141414; --rank-bg-alt: #1e1e1e; --rank-text: #e5e5e5; --rank-border: #2b2b2b; --rank-hover: #243447; --rank-head-bg: #1f3a56; --rank-head-text: #ffffff; --table-head: #111; --table-row-alt: #1b1b1b; --border-color: #333; } /* ========================= TABLE ========================= */ .ranking-table { width: 100%; border-collapse: collapse; font-family: "Century Gothic", Arial, Helvetica, sans-serif; font-size: 13px; background: var(--rank-bg); color: var(--rank-text); } .ranking-table th, .ranking-table td { padding: 6px 8px; border: 1px solid var(--rank-border); vertical-align: middle; } .ranking-table thead th { background: var(--rank-head-bg); color: var(--rank-head-text); text-align: center; font-size: 13px; white-space: nowrap; } /* ========================= ROWS ========================= */ .ranking-table tbody tr:nth-child(even) { background-color: var(--rank-bg-alt); } .ranking-table tbody tr:hover { background-color: var(--rank-hover); color: #000; transition: background-color 0.2s ease; } /* ========================= CELLS ========================= */ .ranking-place { text-align: center; font-weight: bold; width: 50px; } .ranking-result { font-weight: bold; text-align: center; white-space: nowrap; } .ranking-athlete { font-weight: 600; } .ranking-club { font-size: 12px; opacity: 0.85; } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { .ranking-table { font-size: 12px; } .ranking-club { display: none; } } /* ========================= PREMIUM BLUR ========================= */ /* ===== PREMIUM BLUR (POPRAWNY) ===== */ .rank-blur { position: relative; } /* blur tylko zawartości wiersza */ .rank-blur > td { filter: blur(4px); opacity: 0.65; pointer-events: none; } /* overlay NAD blurem */ .rank-blur::after { content: "Dostępne w wersji Premium"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; letter-spacing: .3px; text-transform: uppercase; color: #b8860b; /* złoto */ background: rgba(255,255,255,0.65); z-index: 2; pointer-events: none; } /* DARK MODE */ [data-theme="dark"] .rank-blur::after { background: rgba(0,0,0,0.55); color: #f5c542; } .rank-blur:hover::after { content: "Odblokuj pełny ranking – Premium"; } /* ========================= FOOTER ========================= */ .footer { border-top: 1px solid var(--border-color, #e5e7eb); } [data-theme="dark"] .footer { background-color: #0f172a; } [data-theme="light"] .footer { background-color: #f8f9fa; } .footer-container { padding-top: 1.5rem; padding-bottom: 1rem; } /* GRID */ .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .footer-col h6 { font-weight: 600; margin-bottom: 0.5rem; } .footer-list, .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li a { text-decoration: none; } .footer-links li a:hover { text-decoration: underline; } /* SOCIAL ICONS */ .social-icons { display: flex; gap: 0.75rem; margin-top: 0.75rem; } .social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #9ca3af; background-color: rgba(0,0,0,0.04); transition: all 0.2s ease; } [data-theme="dark"] .social { background-color: rgba(255,255,255,0.06); } .social.fb:hover { color: #1877f2; } .social.yt:hover { color: #ff0000; } .social.patronite:hover { color: #ff6b00; } /* BOTTOM */ .footer-bottom { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color, #e5e7eb); display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted, #6b7280); } /* ========================= COMPACT (MOBILE) ========================= */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 1rem; } .footer-col p, .footer-list { display: none; } .social-icons { justify-content: center; } } /* ========================= FB STATIC BOX (NO TRACKERS) ========================= */ .footer-fb-static { margin-top: 0.75rem; } .fb-static-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 8px; text-decoration: none; background-color: rgba(24,119,242,0.08); color: inherit; transition: background 0.2s ease; } .fb-static-link:hover { background-color: rgba(24,119,242,0.15); } .fb-icon { width: 32px; height: 32px; border-radius: 50%; background-color: #1877f2; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; } .fb-meta strong { display: block; font-size: 0.9rem; } .fb-meta small { font-size: 0.75rem; opacity: 0.8; } /* MOBILE – ukrywamy */ @media (max-width: 768px) { .footer-fb-static { display: none; } } /* Zaliczone podejście */ .attempt-ok { background-color: rgba(0, 80, 255, 0.45); color: #106b06; font-weight: 600; } /* Spalone podejście */ .attempt-fail { background-color: rgba(255, 0, 0, 0.45); color: #c7021c; text-decoration:line-through; font-weight: 600; } .section.competition-header { position: relative; padding: 0 !important; margin-bottom: 24px; width: 90vw; margin-left: calc(-50vw + 55%); background-size: cover; background-repeat: no-repeat; /* AUTO-FOCUS (desktop) */ --poster-focus-y: 32%; background-position: center var(--poster-focus-y); aspect-ratio: 1730 / 530; max-height: 520px; } .competition-header-inner { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 1200px; padding: 20px 20px; text-align: center; background-color: var(--header-box-bg); color: var(--header-box-color); border-radius: 10px; box-shadow: var(--header-box-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* light */ [data-theme="light"] .competition-header-inner { background-color: rgba(255,255,255,0.9); color: #111; } /* dark */ [data-theme="dark"] .competition-header-inner { background-color: rgba(0,0,0,0.65); color: #fff; } .competition-title { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 6px 0; } .competition-meta { font-size: 14px; letter-spacing: 0.06em; opacity: 0.9; } [data-theme="light"] { --header-box-bg: rgba(255,255,255,0.88); --header-box-color: #111; --header-box-shadow: 0 10px 30px rgba(0,0,0,0.18); } [data-theme="dark"] { --header-box-bg: rgba(0,0,0,0.65); --header-box-color: #fff; --header-box-shadow: 0 12px 36px rgba(0,0,0,0.45); } .section.competition-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.05) 100% ); pointer-events: none; } .section.competition-header::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); opacity: 0.15; pointer-events: none; } .competition-header-inner { backdrop-filter: blur(6px); /* NOWOCZESNE */ -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.15); } .competition-title { letter-spacing: 0.02em; text-transform: uppercase; } .competition-meta { letter-spacing: 0.05em; font-size: 14px; } .section.competition-header { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 12px 40px rgba(0,0,0,0.25); } @media (max-width: 768px) { .section.competition-header { --poster-focus-y: 24%; max-height: 300px; } } .competition-header-actions { margin-top: 18px; } .btn-protocol { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: all 0.2s ease; } [data-theme="light"] .btn-protocol { background: #111; color: #fff; } [data-theme="light"] .btn-protocol:hover { background: #000; } [data-theme="dark"] .btn-protocol { background: rgba(255,255,255,0.9); color: #000; } [data-theme="dark"] .btn-protocol:hover { background: #fff; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat { text-align: center; padding: 16px; border-radius: 12px; } .stat-value { font-size: 28px; font-weight: 700; } .stat-label { font-size: 13px; opacity: 0.7; } /* LIGHT */ [data-theme="light"] .stat { background: #f4f4f4; } /* DARK */ [data-theme="dark"] .stat { background: rgba(255,255,255,0.08); } .event-card { position: relative; height: 320px; border-radius: 16px; background-size: cover; background-position: center; overflow: hidden; display: flex; transition: transform .35s ease, box-shadow .35s ease; } .event-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.35); } .event-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,.85), rgba(0,0,0,.45), rgba(0,0,0,.15) ); z-index: 1; } .event-overlay { position: absolute; inset: 0; backdrop-filter: saturate(1.2); z-index: 2; } .event-content { position: relative; z-index: 3; padding: 20px; color: #fff; display: flex; flex-direction: column; height: 100%; } .event-date { align-self: flex-start; background: rgba(220,53,69,.9); padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: auto; } .event-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; line-height: 1.2; } .event-place { font-size: 14px; opacity: .9; margin-bottom: 12px; } .competition-posters-wrap { width: 100%; padding: 0 24px 28px; } .competition-posters-header { margin: 0 0 18px; text-align: center; } .competition-posters-header h2 { margin: 0; font-size: 28px; font-weight: 700; } .competition-posters-grid { display: flex; flex-wrap: nowrap; justify-content: center; gap: 16px; width: 100%; overflow-x: auto; padding-bottom: 4px; } .competition-poster-item { flex: 0 0 360px; max-width: 360px; width: 360px; padding: 0 0 16px; } .competition-poster-card { width: 100%; min-height: 320px; background-color: #232833; } .competition-poster-card.no-poster { background-image: linear-gradient(135deg, #232833, #8f2430); } .competition-posters-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 12px; } .competition-posters-pagination .btn { min-width: 38px; } @media (max-width: 1199px) { .competition-poster-item { flex-basis: 320px; max-width: 320px; width: 320px; } } @media (max-width: 767px) { .competition-posters-wrap { padding-left: 12px; padding-right: 12px; } .competition-poster-item { flex-basis: 300px; max-width: 300px; width: 300px; } .competition-posters-header h2 { font-size: 24px; } } .modal.show { backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); background: rgba(0, 0, 0, 0.05); } .modal.fade .modal-dialog { transform: scale(0.96); transition: all 0.2s ease; } .modal.show .modal-dialog { transform: scale(1); } .modal-content.card-ui { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .modal-body.section { background: var(--card-bg); } .modal-header { border-bottom: 1px solid var(--border-color); } [data-theme="light"] .modal-header .modal-title { color: #1f2937; /* ciemny grafit */ font-weight: 600; } [data-theme="light"] .text-muted, [data-theme="light"] .muted { color: #4b5563; /* ciemniejszy szary */ } [data-theme="light"] .modal-content table { color: #111827; } .stat-women { background: linear-gradient(135deg, rgba(220,38,38,0.08), rgba(220,38,38,0.15)); border: 1px solid rgba(220,38,38,0.25); } .stat-men { background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(37,99,235,0.15)); border: 1px solid rgba(37,99,235,0.25); } [data-theme="dark"] .stat-women { background: rgba(220,38,38,0.12); } [data-theme="dark"] .stat-men { background: rgba(37,99,235,0.12); } /* ========================= TEAM CARD – GLASS ========================= */ .team-card { position: relative; background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 20px; transition: all .25s ease; } .team-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); } /* akcent pozycji */ .team-card::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; border-radius: 14px 0 0 14px; background: linear-gradient(180deg, #dc2626, #991b1b); } /* ========================= HEADER DRUŻYNY ========================= */ .team-header { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; margin-bottom: 12px; } .team-position { font-weight: 800; font-size: 1.2rem; } .team-points { font-size: 1.2rem; font-weight: 700; background: linear-gradient(90deg,#dc2626,#3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ========================= TABLE STYLE ========================= */ .team-card .table-ui tbody tr { transition: all .2s ease; } .team-card .table-ui tbody tr:hover { background: rgba(255,255,255,0.05); transform: scale(1.01); } /* podkreślenie najlepszego zawodnika */ .team-card .table-ui tbody tr:first-child { background: linear-gradient( 90deg, rgba(255,215,0,0.15), transparent ); } /* pkt */ .team-card .table-ui td strong { font-size: 1.05rem; } /* link zawodnika */ .team-card .table-ui a { font-weight: 600; transition: color .2s ease; } .team-card .table-ui a:hover { color: #dc2626; } /* nagłówki tabeli */ .team-card .table-ui thead th { font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; opacity: .75; } .filters-bar { margin-top: 15px; } .filters-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; } .filter-group { display: flex; flex-direction: column; min-width: 180px; flex: 1; } .filter-group label { font-size: 12px; opacity: 0.7; margin-bottom: 4px; } .filter-group select, .filter-group input { padding: 6px 8px; border-radius: 6px; } .range-inputs { display: flex; align-items: center; gap: 6px; } .range-separator { opacity: 0.6; } .filter-submit { justify-content: flex-end; } .btn-primary { padding: 8px 16px; border-radius: 6px; cursor: pointer; }