/* ——— USTAWIENIA OGÓLNE ——— */ :root{ --bg1:#0b1420; --bg2:#0e1b2b; --panel:#112235; --panel-2:#0f1e30; --txt:#e7eef9; --muted:#b9c5d8; --stroke:rgba(255,255,255,.08); --focus:#86b7ff; --head-space:64px; /* odsunięcie treści od góry pod stałe logo (tylko na .home) */ } *{ box-sizing:border-box } html,body{ margin:0 } body{ min-height:100vh; color:var(--txt); background:linear-gradient(#0a1626,#08111d); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; padding-top:0; /* domyślnie brak odsunięcia */ } /* Tylko strona główna (z klasą .home) ma odsunięcie pod logo */ body.home{ padding-top:var(--head-space); } a{ color:var(--muted); text-decoration:none } a:hover{ text-decoration:underline } a:focus-visible, button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:8px; } header,main,footer{ max-width:980px; margin:0 auto; padding:0 16px } header{ padding:28px 16px 8px } h1{ margin:6px 0 4px; font-size:clamp(22px,4.2vw,34px) } .sub{ margin:0 0 16px; color:var(--muted) } /* ——— KAFELKI / TILES (używane w hubach) ——— */ .tiles{ list-style:none; margin:18px 0 28px; padding:0; display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:760px){ .tiles{ grid-template-columns:1fr 1fr } } .tile{ border:1px solid var(--stroke); border-radius:12px; background:rgba(255,255,255,.04); box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05); transform:translateY(0); transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } .tile:hover{ transform:translateY(-2px); background:rgba(255,255,255,.05) } .tile-link{ display:block; padding:16px 18px; color:inherit; text-decoration:none } .tile-title{ display:block; font-weight:700; font-size:1.05rem; margin-bottom:6px } .tile-desc{ display:block; color:var(--muted); font-size:.95rem } /* ——— NAPROWADZACZ W DÓŁ ——— */ .back{ margin:10px 0 28px; color:var(--muted) } .back a{ color:#a8c8ff; text-decoration:none } .back a:hover{ text-decoration:underline } /* ——— KARTY / PANELE (do artykułów) ——— */ .card{ background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px 20px; margin:14px 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.25); } .cols{ display:grid; gap:16px; grid-template-columns:1fr; margin:16px 0 } @media (min-width:780px){ .cols{ grid-template-columns:1fr 1fr } } .good{ background:linear-gradient(180deg,#12341f,#0f2a1a) } .bad{ background:linear-gradient(180deg,#2e1616,#241111) } /* ——— PRZYCISKI GŁOSOWANIA ——— */ .rate-row{ display:flex; gap:10px; margin-bottom:8px } .btn{ padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg,#1a2b42,#152336); color:var(--txt); cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); } /* —— GLOBALNY BADGE LOGO —— */ /* Domyślnie logo WYŁĄCZONE wszędzie */ .site-head{ display:none; position:fixed; top:12px; left:16px; z-index:1000; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(10,22,38,.38); backdrop-filter:blur(6px); color:var(--txt); text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.25); } .site-head:hover{ filter:brightness(1.06); text-decoration:none } .site-head:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:12px } .site-head .logo{ height:20px; margin:0; vertical-align:middle } .site-head .brand{ font-weight:700; opacity:.95 } /* Pokaż logo TYLKO na stronie głównej (body.home) */ body.home .site-head{ display:inline-flex; } /* Home: ukryj każdy bezpośredni w poza .site-head (zabłąkany link) */ body.home > a:not(.site-head){ display:none !important; } /* === VOTE BUTTONS — clean + equal === */ .rate-box{display:flex;gap:10px;align-items:center;margin:16px auto 32px;padding:0 16px} .rate-btn{ appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; min-width:120px; height:42px; /* ta sama szer./wys. */ border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0e1827; color:#e9eef5; line-height:1; cursor:pointer; transition:transform .15s ease, background .15s ease; } .rate-btn:hover{ background:#162339; transform:translateY(-1px) } .rate-btn:focus-visible{ outline:3px solid #86b7ff; outline-offset:3px; border-radius:14px } /* Ikonka kciuka – stały wymiar i brak „kwadratowego” tła */ .rate-btn .icon{ width:20px; height:20px; display:block; flex:0 0 20px } /* ===== MOBILE FIRST / RESPONSIVE TWEAKS (global) ===== */ /* 1) Czytelniejsza typografia na małych ekranach */ @media (max-width: 420px){ html { font-size: 15px; } /* ciut większe litery niż fabryczne 16 → 15px + lepsze proporcje */ body { line-height: 1.65; } h1 { font-size: clamp(22px, 7vw, 32px); } h2 { font-size: clamp(18px, 5.4vw, 24px); } h3 { font-size: clamp(16px, 4.6vw, 20px); } } /* 2) Marginesy i kolumny – więcej powietrza na telefonach */ @media (max-width: 720px){ header, main, footer { padding: 0 14px; } .card { padding: 16px 16px; border-radius: 14px; } .cols { grid-template-columns: 1fr; gap: 12px; } .tiles { grid-template-columns: 1fr; gap: 12px; } } /* 3) Link „powrót” – większy obszar kliku */ .back a{ padding: 6px 4px; border-radius: 8px; } .back a:active{ background: rgba(255,255,255,.06); } /* 4) Listy i akapity – mniej ścisku */ p{ margin: 10px 0 12px; } ul{ margin: 8px 0 12px 20px } li{ margin: 6px 0 } /* 5) Przyciski głosowania – jednorodna wysokość i siatka w pionie na telefonie */ .rate-box{ gap: 10px; flex-wrap: wrap; } .rate-btn{ min-height: 44px; /* zalecany rozmiar dotykowy */ padding: 10px 14px; } @media (max-width: 520px){ .rate-box{ flex-direction: column; align-items: stretch; } .rate-btn{ justify-content: center; } } /* 6) Kontrast i stany focus dla dostępności klawiaturą */ a:focus-visible, button:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; } /* 7) (opcjonalnie) mniejsze cienie na słabszych urządzeniach */ @media (max-width: 420px){ .tile, .card{ box-shadow: 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04); } } /* --- Zielone "chipsy" jak popover --- */ .chips details.pop{ background: linear-gradient(180deg, rgba(66,115,90,.24), rgba(66,115,90,.14)); border-color: rgba(164,224,198,.28); box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(164,224,198,.12); } .chips details.pop summary{ color:#e7f5ec; } .chips details.pop:hover{ filter:brightness(1.06); } /* Zielone tło popovera (PL/EN) */ details.pop .popover{ position:absolute; left:0; top:calc(100% + 8px); min-width:260px; max-width:320px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(64,110,84,.98), rgba(38,79,60,.98)); /* ciepło-zielone tło */ color:#f3fff6; /* jaśniejszy tekst dla kontrastu */ box-shadow:0 18px 42px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06); padding:12px 14px; font-size:13px; z-index:5; } /* Zielone „chipsy” (przyciski) – taki sam odcień jak popover */ .chips details.pop{ background: linear-gradient(180deg, rgba(66,115,90,.24), rgba(66,115,90,.14)); border-color: rgba(164,224,198,.28); box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(164,224,198,.12); } .chips details.pop summary{ color:#e7f5ec; } .chips details.pop:hover{ filter:brightness(1.06); } /* separator między „chipami” */ .chips{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; /* nieco większy luz między elementami */ } .chip-sep{ display:flex; align-items:center; gap:8px; font-size:14px; opacity:.9; user-select:none; padding:2px 6px; border-radius:8px; /* delikatne „powietrze”, bez ramki */ } .chip-sep .arrow{ font-size:18px; line-height:1; opacity:.9 } /* na bardzo wąskich ekranach niech separator spadnie do nowej linii */ @media (max-width:560px){ .chips{ gap:10px } .chip-sep{ width:100%; justify-content:center; margin:2px 0 } } /* separator between chips */ .chips{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .chip-sep{ display:flex; align-items:center; gap:8px; font-size:14px; opacity:.9; user-select:none; padding:2px 6px; border-radius:8px; } .chip-sep .arrow{ font-size:18px; line-height:1; opacity:.9 } @media (max-width:560px){ .chips{ gap:10px } .chip-sep{ width:100%; justify-content:center; margin:2px 0 } }