/* home.css - Modern homepage theme inspired by porownywarka.html & kreator.html Applied only to the homepage: . */ body[data-page="home"] { /* Desktop sizing: keep the whole layout comfortable at 100% zoom on common laptop widths. We still allow a wider layout on very large displays via the media query below. */ --page-max: 1280px; --page-pad: 18px; --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --secondary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%); --bg: #0f172a; --glass: rgba(15, 23, 42, 0.72); --card-bg: rgba(30, 41, 59, 0.72); --border: rgba(148, 163, 184, 0.14); --text: #f1f5f9; --text-muted: #94a3b8; background: radial-gradient(circle at 20% -10%, rgba(139, 92, 246, 0.22), transparent 50%), radial-gradient(circle at 90% 20%, rgba(16, 185, 129, 0.18), transparent 45%), radial-gradient(circle at 50% 120%, rgba(59, 130, 246, 0.14), transparent 50%), var(--bg); color: var(--text); /* Safety: prevent horizontal scroll caused by long labels on narrower desktops */ overflow-x: hidden; } /* Allow a wider layout only on very large displays */ @media (min-width: 1600px){ body[data-page="home"]{ --page-max: 1400px; } } body[data-page="home"] #particles-js { opacity: 0.18; } @media (max-width: 900px){ body[data-page="home"] #particles-js{ opacity: 0.12; } } /* Top support + weather bar (replaces the old decorative top bar) */ body[data-page="home"] .top-support-bar{ background: rgba(10, 15, 30, 0.70); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); } body[data-page="home"] .top-support-inner{ max-width: var(--page-max); margin: 0 auto; padding: 10px var(--page-pad); display:flex; align-items:center; justify-content: space-between; gap: 14px; } body[data-page="home"] .support-message{ display:flex; align-items:center; gap: 12px; flex: 1 1 auto; min-width: 260px; } body[data-page="home"] .support-copy{ display:flex; align-items:center; gap: 10px; color: #e6edf3; opacity: 0.92; line-height: 1.25; } body[data-page="home"] .support-ico{ font-size: 1.15rem; } body[data-page="home"] .support-text{ font-size: 0.86rem; } body[data-page="home"] .support-btn{ display:inline-flex; align-items:center; justify-content:center; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(16, 185, 129, 0.16); color:#e6edf3; font-weight: 900; text-decoration:none; white-space: nowrap; } body[data-page="home"] .support-btn:hover{ background: rgba(16, 185, 129, 0.22); border-color: rgba(16, 185, 129, 0.45); } body[data-page="home"] .top-widgets{ display:flex; align-items:center; gap: 10px; flex: 0 0 auto; } body[data-page="home"] .top-pill-btn{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(2, 6, 23, 0.30); color:#e6edf3; cursor:pointer; font-weight: 900; } body[data-page="home"] .top-pill-btn:hover{ border-color: rgba(139, 92, 246, 0.35); background: rgba(2, 6, 23, 0.40); } body[data-page="home"] .top-pill-btn .badge-red{ display:none; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; } body[data-page="home"] .weather-pill{ gap: 10px; } body[data-page="home"] .weather-stack{ display:flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; gap: 2px; } body[data-page="home"] .weather-icon{ width: 24px; height: 24px; display:inline-flex; align-items:center; justify-content:center; } body[data-page="home"] .weather-temp{ font-weight: 900; font-size: 0.98rem; } body[data-page="home"] .weather-loc{ font-size: 0.78rem; opacity: 0.85; max-width: 140px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } /* Simple animated SVG weather icons */ @keyframes aioSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes aioFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0px); } } @keyframes aioDrop { 0% { transform: translateY(-2px); opacity: .2; } 50% { opacity: .9; } 100% { transform: translateY(6px); opacity: .0; } } body[data-page="home"] .wx-sun-rays{ transform-origin: 12px 12px; animation: aioSpin 10s linear infinite; } body[data-page="home"] .wx-cloud{ animation: aioFloat 3.6s ease-in-out infinite; } body[data-page="home"] .wx-rain{ animation: aioDrop 1.1s linear infinite; } @media (max-width: 900px) { body[data-page="home"] .top-support-inner{ flex-wrap: wrap; justify-content: center; } body[data-page="home"] .support-message{ justify-content: center; } body[data-page="home"] .top-widgets{ width: 100%; justify-content: center; } body[data-page="home"] .weather-loc{ max-width: 220px; } } @media (max-width: 520px) { body[data-page="home"] .support-text{ font-size: 0.80rem; } body[data-page="home"] .support-btn{ width: 100%; } body[data-page="home"] .support-message{ flex-direction: column; align-items: stretch; } } /* Make the global container feel like a modern dashboard */ body[data-page="home"] .container { max-width: var(--page-max); padding: 0 var(--page-pad); margin-top: 28px; } /* Desktop grid: keep cards readable without forcing browser zoom-out */ @media (min-width: 1100px) and (max-width: 1499px){ body[data-page="home"] .container{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 1500px){ body[data-page="home"] .container{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* Top bar */ body[data-page="home"] .top-info-bar { background: var(--glass); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); } body[data-page="home"] .top-btn-small { background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border); border-radius: 999px; } body[data-page="home"] .top-btn-small:hover { border-color: rgba(139, 92, 246, 0.45); background: rgba(30, 41, 59, 0.75); } /* Hero */ body[data-page="home"] .hero-header { background: linear-gradient(135deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.82)); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); } body[data-page="home"] .brand-text h1 { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } body[data-page="home"] .brand-text p { color: var(--text-muted); } body[data-page="home"] .h-stat-val { color: var(--text); } body[data-page="home"] .h-stat-label { color: var(--text-muted); } /* Main navigation */ body[data-page="home"] .main-navigation-bar { background: rgba(15, 23, 42, 0.85); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); /* Keep the navigation usable at 100% zoom on typical desktop widths */ padding-left: var(--page-pad) !important; padding-right: var(--page-pad) !important; } /* Desktop nav: allow right group to wrap if labels become long */ body[data-page="home"] .nav-right-group{ flex-wrap: wrap; } body[data-page="home"] .search-input-header{ width: 180px; max-width: 220px; min-width: 140px; } body[data-page="home"] .search-input-header:focus{ width: 200px; } @media (max-width: 1400px){ body[data-page="home"] .menu-btn{ padding: 8px 12px; font-size: 0.84rem; } body[data-page="home"] .nav-left-group{ gap: 10px; } body[data-page="home"] .nav-right-group{ gap: 10px; } } /* Mobile-only CTA (update download) – hidden on desktop by default */ body[data-page="home"] .mobile-update-cta{ display: none; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: #e6edf3; font-weight: 900; letter-spacing: .2px; background: rgba(46, 160, 67, 0.18); border: 1px solid rgba(63, 185, 80, 0.62); box-shadow: 0 0 20px rgba(63, 185, 80, 0.22); text-shadow: 0 0 12px rgba(63, 185, 80, 0.18); } body[data-page="home"] .mobile-update-cta:hover{ filter: brightness(1.08); transform: translateY(-1px); } body[data-page="home"] .mobile-update-cta:active{ transform: translateY(0px) scale(0.99); } body[data-page="home"] .menu-btn { background: rgba(30, 41, 59, 0.65); border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px; color: var(--text); } body[data-page="home"] .menu-btn:hover, body[data-page="home"] .menu-btn.active { background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.55); transform: translateY(-1px); } body[data-page="home"] .menu-badge { background: rgba(16, 185, 129, 0.95); } body[data-page="home"] .menu-badge.red { background: rgba(248, 81, 73, 0.95); } body[data-page="home"] .search-input-header { background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border); color: var(--text); border-radius: 999px; } body[data-page="home"] .search-input-header:focus { border-color: rgba(139, 92, 246, 0.65); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); } /* Banner */ body[data-page="home"] .news-banner { background: linear-gradient(90deg, rgba(99, 102, 241, 0.9) 0%, rgba(16, 185, 129, 0.9) 100%); border-bottom: 1px solid var(--border); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.4); } body[data-page="home"] .banner-btn { border-radius: 999px; padding: 7px 16px; } /* Cards */ body[data-page="home"] .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35); } body[data-page="home"] .card:hover { border-color: rgba(139, 92, 246, 0.55); box-shadow: 0 14px 40px rgba(15, 23, 42, 0.55); } body[data-page="home"] .card h2 { border-bottom: 1px solid rgba(148, 163, 184, 0.16); padding-bottom: 12px; margin-bottom: 16px; font-size: 1.15rem; color: var(--text); } body[data-page="home"] .card h2::selection, body[data-page="home"] .card p::selection, body[data-page="home"] .file-link::selection { background: rgba(139, 92, 246, 0.35); } body[data-page="home"] .card p { color: var(--text-muted); } /* Lists */ body[data-page="home"] .file-list li { border-bottom: 1px solid rgba(148, 163, 184, 0.12); } body[data-page="home"] .file-link { color: #c7d2fe; } body[data-page="home"] .file-link:hover { color: #e9d5ff; } body[data-page="home"] .badge { background: rgba(99, 102, 241, 0.95); } body[data-page="home"] .badge-warning { background: rgba(210, 153, 34, 0.95); color: #0b1220; } /* Accordion */ body[data-page="home"] .accordion-header { color: #fbbf24; } body[data-page="home"] .accordion-header.blue-header { color: #c7d2fe; } body[data-page="home"] .accordion-content { background-color: rgba(15, 23, 42, 0.45); border: 1px solid rgba(148, 163, 184, 0.08); } /* Plugin rating */ body[data-page="home"] .plugin-rating { background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(148, 163, 184, 0.12); border-left: 3px solid rgba(139, 92, 246, 0.85); } /* Modal */ body[data-page="home"] .modal-content { background: rgba(15, 23, 42, 0.9); border: 1px solid var(--border); } /* Footer */ body[data-page="home"] footer { background: rgba(15, 23, 42, 0.72); border-top: 1px solid var(--border); } /* Mobile tuning */ @media (max-width: 600px) { body[data-page="home"] .menu-btn { padding: 7px 12px; border-radius: 14px; } body[data-page="home"] .top-btn-small { padding: 5px 12px; } } /* Light mode (when script toggles body.light) */ body[data-page="home"].light { --bg: #f6f8fa; --glass: rgba(255, 255, 255, 0.72); --card-bg: rgba(255, 255, 255, 0.82); --border: rgba(2, 6, 23, 0.12); --text: #0f172a; --text-muted: #475569; background: radial-gradient(circle at 20% -10%, rgba(139, 92, 246, 0.12), transparent 55%), radial-gradient(circle at 90% 20%, rgba(16, 185, 129, 0.10), transparent 50%), #f6f8fa; color: var(--text); } body[data-page="home"].light #particles-js { opacity: 0.18; } body[data-page="home"].light .menu-btn, body[data-page="home"].light .top-btn-small, body[data-page="home"].light .search-input-header { background: rgba(255, 255, 255, 0.82); } body[data-page="home"].light .hero-header, body[data-page="home"].light .main-navigation-bar, body[data-page="home"].light .top-info-bar { background: rgba(255, 255, 255, 0.75); } /* ===== Modern UX additions (homepage) ===== */ body[data-page="home"] .span-all { grid-column: 1 / -1; } body[data-page="home"] .card-intro { padding: 26px; background: linear-gradient(135deg, rgba(30, 41, 59, 0.78), rgba(15, 23, 42, 0.86)); border: 1px solid rgba(148, 163, 184, 0.16); backdrop-filter: blur(12px); } body[data-page="home"] .intro-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } body[data-page="home"] .intro-title h2 { margin: 0 0 6px 0; font-size: 1.25rem; } body[data-page="home"] .intro-title p { margin: 0; color: var(--text-muted); max-width: 64ch; } body[data-page="home"] .intro-actions { display: flex; gap: 10px; flex-wrap: wrap; } body[data-page="home"] .pill-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; text-decoration: none; color: var(--text); background: rgba(30, 41, 59, 0.65); border: 1px solid var(--border); transition: transform .2s ease, border-color .2s ease, background .2s ease; font-weight: 600; font-size: 0.9rem; } body[data-page="home"] .pill-link:hover { transform: translateY(-1px); border-color: rgba(139, 92, 246, 0.55); background: rgba(139, 92, 246, 0.12); } body[data-page="home"] .quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body[data-page="home"] .quick-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px; text-decoration: none; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(148, 163, 184, 0.12); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } body[data-page="home"] .quick-card:hover { transform: translateY(-3px); border-color: rgba(99, 102, 241, 0.45); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.45); } body[data-page="home"] .quick-ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--primary-gradient); flex: 0 0 auto; font-size: 1.25rem; } body[data-page="home"] .quick-title { font-weight: 800; color: var(--text); margin: 0 0 6px 0; } body[data-page="home"] .quick-desc { color: var(--text-muted); font-size: 0.88rem; line-height: 1.35; } /* ===== Responsive navigation (mobile) ===== */ body[data-page="home"] .nav-toggle { display: none; } @media (max-width: 900px) { body[data-page="home"] .nav-toggle { display: inline-flex; } body[data-page="home"] .main-navigation-bar { gap: 12px; } body[data-page="home"] .nav-left-group { width: 100%; order: 3; max-height: 0; overflow: hidden; transition: max-height .28s ease; padding-bottom: 0; } body[data-page="home"] .main-navigation-bar.nav-open .nav-left-group { max-height: 70vh; padding-bottom: 8px; } body[data-page="home"] .nav-left-group .menu-btn { width: 100%; justify-content: space-between; border-radius: 14px; } body[data-page="home"] .nav-right-group { width: 100%; order: 2; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } body[data-page="home"] .search-input-header { width: 100%; } } /* ===== Footer (modern) - Uporządkowany (desktop+mobile) ===== */ body[data-page="home"] .site-footer { text-align: left; margin-top: 0; background: #0b1120; /* Nieco ciemniejszy dla kontrastu */ border-top: 1px solid rgba(148, 163, 184, 0.1); padding: 40px 0 20px; font-size: 0.92rem; } body[data-page="home"] .footer-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); } /* 1. Lepszy podział kolumn: Szeroka marka | Wąskie linki | Wąskie linki | Szeroki kontakt */ body[data-page="home"] .footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1.2fr; gap: 30px; align-items: start; padding-bottom: 30px; border-bottom: 1px solid rgba(148, 163, 184, 0.1); } /* Tytuły kolumn */ body[data-page="home"] .footer-title { font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.75rem; margin-bottom: 16px; color: #94a3b8; /* Muted color dla nagłówków */ } /* Linki w kolumnach */ body[data-page="home"] .footer-link { display: block; color: #cbd5e1; text-decoration: none; padding: 4px 0; transition: color 0.2s ease, transform 0.2s ease; } body[data-page="home"] .footer-link:hover { color: #60a5fa; /* Niebieski highlight */ transform: translateX(3px); } body[data-page="home"] .footer-link.inline { display: inline; padding: 0; color: #60a5fa; } /* Branding (pierwsza kolumna) */ body[data-page="home"] .footer-brand-row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } body[data-page="home"] .footer-logo { width: 42px; height: 42px; border-radius: 10px; background: rgba(30, 41, 59, 0.5); padding: 2px; border: 1px solid rgba(255,255,255,0.05); } body[data-page="home"] .footer-brand-name { font-size: 1.1rem; font-weight: 800; color: #f1f5f9; } body[data-page="home"] .footer-brand-tag { font-size: 0.8rem; color: #64748b; } body[data-page="home"] .footer-note { color: #64748b; font-size: 0.85rem; line-height: 1.6; max-width: 320px; } /* Kontakt i KPI (czwarta kolumna) */ body[data-page="home"] .footer-kpi { display: flex; align-items: center; gap: 10px; color: #cbd5e1; padding: 5px 0; font-size: 0.9rem; } /* Ikony wstawiane przez HTML - tutaj wyrównanie */ body[data-page="home"] .footer-kpi i, body[data-page="home"] .footer-kpi span.icon { width: 20px; text-align: center; color: #64748b; } /* Sekcja Wsparcia - Kompaktowa */ body[data-page="home"] .footer-support { margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgba(148, 163, 184, 0.15); } body[data-page="home"] .footer-support-title { font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 10px; } body[data-page="home"] .footer-support-row { display: grid; grid-template-columns: 1fr 1fr; /* Dwa przyciski obok siebie */ gap: 10px; } /* Nowe, mniejsze przyciski wsparcia */ body[data-page="home"] .support-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.15); background: rgba(15, 23, 42, 0.6); text-decoration: none; transition: all 0.2s ease; } body[data-page="home"] .support-btn:hover { background: rgba(30, 41, 59, 0.8); border-color: #60a5fa; transform: translateY(-2px); } body[data-page="home"] .support-logo svg { width: 20px; height: 20px; display: block; } body[data-page="home"] .support-text { display: flex; flex-direction: column; line-height: 1; text-align: left; } body[data-page="home"] .support-name { font-weight: 700; font-size: 0.85rem; color: #e2e8f0; } body[data-page="home"] .support-sub { font-size: 0.65rem; color: #64748b; display: none; } body[data-page="home"] .support-btn:hover .support-sub { display: block; } /* Dolny pasek (Copyright) */ body[data-page="home"] .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; color: #64748b; font-size: 0.8rem; } body[data-page="home"] .footer-legal { display: flex; gap: 15px; } body[data-page="home"] .footer-legal a { color: #64748b; text-decoration: none; } body[data-page="home"] .footer-legal a:hover { color: #94a3b8; } /* Mobile (Poniżej 900px) */ @media (max-width: 900px) { body[data-page="home"] .footer-grid { grid-template-columns: 1fr; /* Jedna kolumna */ gap: 30px; } body[data-page="home"] .footer-support-row { grid-template-columns: 1fr; /* Przyciski jeden pod drugim na mobile */ } body[data-page="home"] .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } body[data-page="home"] .footer-legal { justify-content: center; } } /* --- Mobile: quick Support (Coffee) access --- */ @media (max-width: 700px) { /* Ensure support card is not accidentally hidden/collapsed */ #wsparcie { display: block !important; } .support-fab { position: fixed; left: 14px; bottom: 18px; z-index: 1400; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(15, 23, 42, 0.82); color: #f1f5f9; padding: 10px 14px; border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.45); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.2px; display: inline-flex; align-items: center; gap: 8px; } /* Avoid overlap with "to top" button (usually on the right) */ .support-fab:active { transform: translateY(1px); } } @media (min-width: 601px) { .support-fab { display: none; } } /* Drawer */ .support-drawer { position: fixed; inset: 0; z-index: 1500; pointer-events: none; } .support-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 180ms ease; } .support-drawer__sheet { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.96); border-top: 1px solid rgba(148, 163, 184, 0.18); border-top-left-radius: 18px; border-top-right-radius: 18px; transform: translateY(110%); transition: transform 220ms ease; max-height: 78vh; overflow: hidden; } .support-drawer__handle { width: 44px; height: 5px; border-radius: 999px; background: rgba(148, 163, 184, 0.35); margin: 10px auto 6px; } .support-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); } .support-drawer__title { font-weight: 800; font-size: 1.05rem; color: #e2e8f0; } .support-drawer__close { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(148, 163, 184, 0.18); color: #e2e8f0; width: 36px; height: 34px; border-radius: 10px; font-size: 1.25rem; line-height: 1; } .support-drawer__content { padding: 14px; overflow: auto; max-height: calc(78vh - 56px); } .support-drawer.open { pointer-events: auto; } .support-drawer.open .support-drawer__backdrop { opacity: 1; } .support-drawer.open .support-drawer__sheet { transform: translateY(0%); } /* Make support content fit nicely in drawer */ .support-drawer__content .qr-code { max-width: 200px; } .support-drawer__content img { height: auto; } html.no-scroll, body.no-scroll { overflow: hidden !important; } /* --- FIX: Start tutaj (quick-grid) on phones --- */ @media (max-width: 900px) { body[data-page="home"] .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { body[data-page="home"] .card-intro { padding: 18px 16px; } body[data-page="home"] .intro-head { flex-direction: column; align-items: flex-start; gap: 12px; } body[data-page="home"] .intro-actions { width: 100%; flex-wrap: wrap; } body[data-page="home"] .pill-link { flex: 1 1 auto; justify-content: center; } body[data-page="home"] .quick-grid { grid-template-columns: 1fr; } body[data-page="home"] .quick-card { align-items: center; } body[data-page="home"] .quick-ico { width: 52px; height: 52px; font-size: 1.35rem; } body[data-page="home"] .quick-desc { font-size: 0.9rem; } } /* ========================================================= FINAL UI PATCH (GitHub Pages, mobile fixes, AI Chat, KB) ========================================================= */ .brand-logo-img{ height:56px; width:auto; display:block; } .brand-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-left:10px; align-items:center; } .brand-badge{ height:22px; width:auto; opacity:.95; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); } @media (max-width: 700px){ .brand-area{ gap: 12px; } .brand-badges{ margin-left: 0; } .brand-badge{ height:20px; } } /* Support drawer: ensure sheet above backdrop (mobile fix) */ .support-drawer{ position: fixed; inset: 0; display: none; z-index: 1800; } .support-drawer.open{ display:block; } .support-drawer__backdrop{ position:absolute; inset:0; background: rgba(2,6,23,0.78); z-index: 0; } .support-drawer__sheet{ position:absolute; left: 12px; right: 12px; bottom: 12px; max-height: 85vh; overflow: auto; background: rgba(17,24,39,0.92); border: 1px solid rgba(148,163,184,0.22); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,0.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1; } /* Floating buttons */ .support-fab, .ai-chat-fab{ position: fixed; right: 14px; bottom: 14px; z-index: 1750; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(17,24,39,.80); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color:#fff; font-weight:800; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor:pointer; } .ai-chat-fab{ bottom: 60px; } @media (min-width: 900px){ .support-fab, .ai-chat-fab{ right: 18px; } } /* AI Chat drawer */ .ai-chat-drawer{ position: fixed; inset: 0; display: none; z-index: 1900; } .ai-chat-drawer.open{ display:block; } .ai-chat-drawer__backdrop{ position:absolute; inset:0; background: rgba(2,6,23,0.78); z-index: 0; } .ai-chat-drawer__sheet{ position:absolute; right: 12px; bottom: 12px; width: min(520px, calc(100vw - 24px)); max-height: 85vh; display:flex; flex-direction: column; background: rgba(17,24,39,0.92); border: 1px solid rgba(148,163,184,0.22); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1; } .ai-chat-drawer__header{ display:flex; align-items:center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(148,163,184,0.18); } .ai-chat-drawer__title{ font-weight: 900; color:#e5e7eb; } .ai-chat-drawer__close{ width: 34px; height:34px; border-radius: 10px; border:1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.35); color:#e5e7eb; font-size: 1.05rem; } .ai-chat__chips{ display:flex; gap: 8px; padding: 10px 12px; flex-wrap: wrap; border-bottom: 1px solid rgba(148,163,184,0.12); } .ai-chat__chips .chip{ border: 1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.25); color:#e6edf3; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 6px 10px; cursor: pointer; } .ai-chat__messages{ padding: 12px; overflow:auto; display:flex; flex-direction: column; gap: 10px; } .msg{ border: 1px solid rgba(148,163,184,0.14); background: rgba(2,6,23,0.18); border-radius: 14px; padding: 10px 12px; color:#e6edf3; } .msg.user{ background: rgba(56,139,253,0.12); border-color: rgba(56,139,253,0.22); } .msg .meta{ font-size: 12px; opacity: .75; margin-bottom: 6px; } .msg pre{ white-space: pre-wrap; word-break: break-word; background: rgba(2,6,23,0.35); border: 1px solid rgba(148,163,184,0.14); border-radius: 12px; padding: 10px; overflow:auto; } .ai-chat__composer{ display:flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(148,163,184,0.18); } .ai-chat__input{ flex:1; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.22); color:#e6edf3; } .ai-chat__send{ padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.18); background: rgba(56,139,253,0.18); color:#e6edf3; font-weight: 900; cursor:pointer; } .ai-chat__hint{ padding: 0 12px 12px; font-size: 12px; opacity: .75; } /* Notifications overlay (bell) */ .notifications-backdrop{ display:none; position: fixed; inset: 0; background: rgba(2,6,23,0.55); z-index: 2090; } .notifications-backdrop.show{ display:block; } .notifications-dropdown{ display:none; position: fixed !important; top: 54px; right: 12px; width: min(360px, calc(100vw - 24px)); background: rgba(17,24,39,0.92); border: 1px solid rgba(148,163,184,0.22); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.65); z-index: 2100; overflow: hidden; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .notifications-dropdown.show{ display:block; } .notif-header{ display:flex; justify-content:space-between; align-items:center; padding: 10px 12px; border-bottom: 1px solid rgba(148,163,184,0.18); } .notif-title{ font-weight: 900; color:#e6edf3; } .notif-close{ width: 34px; height:34px; border-radius: 10px; border:1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.35); color:#e5e7eb; font-size: 1.05rem; cursor:pointer; } .notif-list{ max-height: 50vh; overflow:auto; } .notif-item{ padding: 10px 12px; border-bottom: 1px solid rgba(148,163,184,0.10); font-size: 0.85rem; color: #e6edf3; cursor: pointer; display:flex; gap: 10px; } .notif-item:hover{ background: rgba(2,6,23,0.25); } .notif-item .date{ font-size: 12px; opacity: .7; margin-top: 2px; } .notif-footer{ padding: 10px 12px; } .notif-markall{ width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.22); color:#e6edf3; font-weight: 900; cursor:pointer; } /* Knowledge base */ .section-desc{ color:#9aa4b2; margin-top: -6px; } .kb-toolbar{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; margin: 12px 0 14px; } .kb-search{ flex:1; min-width: 220px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.22); color:#e6edf3; } .kb-tags{ display:flex; flex-wrap: wrap; gap: 8px; } .kb-tag{ border: 1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.18); color:#e6edf3; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 6px 10px; cursor:pointer; } .kb-tag.active{ background: rgba(56,139,253,0.18); border-color: rgba(56,139,253,0.24); } .kb-layout{ display:grid; grid-template-columns: 1fr 1.4fr; gap: 12px; } @media (max-width: 900px){ .kb-layout{ grid-template-columns: 1fr; } } .kb-list{ border: 1px solid rgba(148,163,184,0.14); background: rgba(2,6,23,0.16); border-radius: 14px; overflow:hidden; } .kb-item{ padding: 10px 12px; border-bottom: 1px solid rgba(148,163,184,0.10); cursor:pointer; } .kb-item:last-child{ border-bottom:none; } .kb-item:hover{ background: rgba(2,6,23,0.25); } .kb-item .t{ font-weight: 900; color:#e6edf3; } .kb-item .m{ font-size: 12px; opacity:.75; margin-top: 4px; } .kb-view{ border: 1px solid rgba(148,163,184,0.14); background: rgba(2,6,23,0.16); border-radius: 14px; padding: 12px; min-height: 220px; } .kb-view h3{ margin-top: 0; } .kb-empty{ opacity:.75; } .kb-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .btn-copy{ border: 1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.22); color:#e6edf3; font-weight: 900; border-radius: 12px; padding: 10px 12px; cursor:pointer; } /* Tools & systems */ .tools-grid, .systems-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1000px){ .tools-grid, .systems-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px){ .tools-grid, .systems-grid{ grid-template-columns: 1fr; } } .tile{ border: 1px solid rgba(148,163,184,0.14); background: rgba(2,6,23,0.16); border-radius: 16px; padding: 12px; } .tile h3{ margin: 0 0 6px; } .tile p{ margin: 0 0 10px; color:#9aa4b2; } .tile pre{ white-space: pre-wrap; word-break: break-word; background: rgba(2,6,23,0.35); border: 1px solid rgba(148,163,184,0.14); border-radius: 12px; padding: 10px; overflow:auto; } .checklist{ display:flex; flex-direction:column; gap: 8px; margin-top: 10px; } .check{ display:flex; gap: 10px; align-items:flex-start; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(148,163,184,0.12); background: rgba(2,6,23,0.16); } .check input{ margin-top: 3px; } /* No-scroll helper */ .no-scroll{ overflow: hidden !important; } /* ====================================================== MOBILE: cienki pasek (pogoda + udostępnij + menu) + bez dużego nagłówka ====================================================== */ @media (max-width: 900px) { /* Ukryj duży nagłówek (zasłania ekran na telefonach) */ body[data-page="home"] .site-header-simple{ display: none !important; } /* Ukryj szeroki pasek wsparcia na mobile */ body[data-page="home"] .top-support-bar{ display: none !important; } /* Cienki, stały pasek: wykorzystujemy main-navigation-bar */ body[data-page="home"] .main-navigation-bar{ position: sticky !important; top: 0 !important; z-index: 9999; margin: 0; padding: 6px 10px; min-height: 50px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Mobile CTA: "Aktualizacja AIO Panel v5.0 — Pobierz teraz" (above controls) */ body[data-page="home"] .mobile-update-cta{ display: flex; width: 100%; flex: 0 0 100%; order: -1; margin: 2px 0 8px; } /* Drawer must sit above the sticky navigation (otherwise taps are blocked) */ body[data-page="home"] .mobile-nav-drawer{ z-index: 20000; } /* When the drawer is open, hide the sticky bar to avoid overlap */ body.nav-drawer-open[data-page="home"] .main-navigation-bar{ visibility: hidden; opacity: 0; pointer-events: none; } /* Ukryj „zakładki” w poziomie – zostają w menu rozwijanym */ body[data-page="home"] .nav-left-group{ display: none !important; } /* W barze zostaw: hamburger + pogoda + udostępnij */ body[data-page="home"] .search-input-header{ display: none !important; } body[data-page="home"] #themeToggle{ display: none !important; } body[data-page="home"] .nav-right-group{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; } body[data-page="home"] .nav-toggle{ display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; } body[data-page="home"] .weather-mini{ display: inline-flex !important; } } /* Mini pogoda w pasku nawigacji (mobile) */ body[data-page="home"] .weather-mini{ display: none; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.18); background: rgba(2,6,23,0.20); color: #e6edf3; } body[data-page="home"] .weather-mini .weather-stack{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; } body[data-page="home"] .weather-mini .weather-loc{ font-size: 0.72rem; opacity: 0.78; max-width: 140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body[data-page="home"] .weather-mini .weather-temp{ font-weight: 900; font-size: 0.95rem; } /* Simple header (mobile-friendly replacement for top-info-bar) */ body[data-page="home"] .site-header-simple { background: rgba(15, 23, 42, 0.65); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); } body[data-page="home"] .site-header-inner { max-width: var(--page-max); margin: 0 auto; padding: 18px var(--page-pad); display: flex; align-items: center; justify-content: center; gap: 16px; text-align: left; } body[data-page="home"] .site-logo { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.55); flex: 0 0 auto; } body[data-page="home"] .site-title-block h1 { margin: 0; font-size: 1.85rem; letter-spacing: 0.5px; } body[data-page="home"] .site-subtitle { margin: 2px 0 0 0; opacity: 0.85; font-size: 1.02rem; } body[data-page="home"] .site-tagline { margin: 6px 0 0 0; font-size: 0.84rem; opacity: 0.72; } @media (max-width: 700px) { body[data-page="home"] .site-header-inner { padding: 14px 14px; flex-direction: column; text-align: center; } body[data-page="home"] .site-logo { width: 56px; height: 56px; } body[data-page="home"] .site-title-block h1 { font-size: 1.6rem; } } /* Ensure the banner buttons work reliably on touch devices */ body[data-page="home"] .news-banner { position: relative; z-index: 25; } body[data-page="home"] .news-banner, body[data-page="home"] .news-banner * { pointer-events: auto; } /* Mobile: przenieś Wsparcie i AI Chat na lewą stronę (nie zasłaniają przycisku 'do góry') */ @media (max-width: 700px){ .support-fab, .ai-chat-fab{ left: 14px !important; right: auto !important; } } /* ===== Mobile cleanup (requested) ===== */ @media (max-width: 700px){ /* Hide large hero header (AIO IPTV + logo) – mobile uses only the thin sticky bar */ .hero-header{ display:none !important; } /* Thin sticky top bar: only menu + weather + share */ .main-navigation-bar{ padding: 8px 12px !important; gap: 8px !important; } .nav-left-group{ display:none !important; } #searchBoxHeader, #themeToggle{ display:none !important; } .nav-right-group{ width: 100% !important; justify-content: space-between !important; gap: 8px !important; } #navToggle{ padding: 8px 12px !important; } .weather-mini{ flex: 1 1 auto !important; justify-content: center !important; padding: 6px 10px !important; } /* Ensure banner buttons are always clickable on mobile */ .news-banner, .banner-actions, .banner-btn{ pointer-events: auto !important; } /* Move Coffee/AI Chat to the other side (left) on mobile */ .support-fab, .ai-chat-fab{ left: 14px !important; right: auto !important; } .ai-chat-fab{ bottom: 60px !important; } } /* Reduce background distraction further */ #particles-js{ opacity: 0.35; } /* === AIO Panel v5.0 update + holiday message (minimal additions) === */ body[data-page="home"] .update-ribbon{ display:inline-flex; align-items:center; justify-content:center; gap: 6px; padding: 8px 12px; border-radius: 14px; font-weight: 800; letter-spacing: .2px; color: #e6edf3; background: rgba(46, 160, 67, 0.18); border: 1px solid rgba(63, 185, 80, 0.55); box-shadow: 0 0 18px rgba(63, 185, 80, 0.28); text-shadow: 0 0 10px rgba(63, 185, 80, 0.25); white-space: nowrap; margin-right: 6px; } @media (prefers-reduced-motion: no-preference){ body[data-page="home"] .update-ribbon{ animation: aioUpdatePulse 2.6s ease-in-out infinite; } @keyframes aioUpdatePulse{ 0%, 100%{ box-shadow: 0 0 18px rgba(63, 185, 80, 0.22); } 50%{ box-shadow: 0 0 28px rgba(63, 185, 80, 0.42); } } } body[data-page="home"] .support-marquee{ position: relative; overflow: hidden; flex: 1 1 auto; min-width: 220px; } body[data-page="home"] .support-marquee .support-text{ display: inline-block; white-space: nowrap; padding-left: 100%; } @media (prefers-reduced-motion: no-preference){ body[data-page="home"] .support-marquee .support-text{ animation: supportMarquee 18s linear infinite; } @keyframes supportMarquee{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-100%); } } } body[data-page="home"] .holiday-wish{ display:inline-flex; align-items:center; justify-content:center; padding: 8px 12px; border-radius: 999px; font-weight: 800; font-size: 0.86rem; letter-spacing: .15px; white-space: nowrap; color: #fff7e6; background: linear-gradient(90deg, rgba(180, 0, 0, 0.36), rgba(0, 120, 0, 0.30)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 18px rgba(255, 215, 0, 0.16); } body[data-page="home"] .holiday-wish::before{ content: "✦"; margin-right: 8px; opacity: .9; } body[data-page="home"] .holiday-wish::after{ content: "✦"; margin-left: 8px; opacity: .9; } /* === Adjustments: restore top bar, move holiday wish under update badge, strengthen coffee marquee === */ body[data-page="home"] .header-badges{ display:flex; flex-direction: column; align-items:flex-start; justify-content:center; gap: 6px; } body[data-page="home"] .update-link{ text-decoration: none; cursor: pointer; } body[data-page="home"] .update-link:hover{ filter: brightness(1.08); transform: translateY(-1px); } body[data-page="home"] .update-link:focus{ outline: 2px solid rgba(63, 185, 80, 0.55); outline-offset: 2px; } /* Make the coffee (support) marquee more prominent */ body[data-page="home"] .support-copy{ opacity: 1; } body[data-page="home"] .support-text{ font-size: 0.95rem; } body[data-page="home"] .support-marquee{ border-radius: 12px; } body[data-page="home"] .support-marquee .support-text{ font-weight: 800; text-shadow: 0 0 14px rgba(56, 189, 248, 0.22); } @media (prefers-reduced-motion: no-preference){ body[data-page="home"] .support-marquee .support-text{ animation-duration: 14s; } } /* Ensure holiday wish sits nicely under the update badge */ body[data-page="home"] .holiday-wish{ max-width: 360px; } @media (max-width: 900px){ body[data-page="home"] .header-badges{ align-items:center; } body[data-page="home"] .holiday-wish{ max-width: 100%; } }