/* ========================================================= DiabloCentrum - styl serwisu Tylko ciemny motyw. Wygląd według oryginalnych plansz (design/Oryginalne-plansze, etap 3). ========================================================= */ /* ---------- TOKENY (zadanie 3.2) ---------- Jedyne miejsce z wartościami kolorów. Reszta pliku używa tylko zmiennych (test w tools/testy.php; kontrast par: php tools/kontrast.php). */ :root{ /* kolory z planszy logo */ --c-obsidian:#11100F; /* obsydianowa czerń */ --c-gold:#BA9562; /* antyczne złoto */ --c-bone:#E8DDCA; /* kość Sanktuarium */ --c-blood:#872F2B; /* krwawa ochra */ /* pochodne */ --c-bg-deep:#0B0A09; /* pasek nad nagłówkiem, stopka */ --c-surface:#181614; /* karty, ramki */ --c-surface-2:#211E1A; /* pola, wyróżnione tła */ --c-surface-3:#2A2621; /* najechanie */ --c-line:#3D352A; /* linie i separatory (ozdobne) */ --c-line-soft:#2A251F; --c-line-ui:#806A48; /* obramowanie pól i przycisków (≥ 3:1) */ --c-gold-light:#D9B97F; /* odnośniki, etykiety, fokus */ --c-ink-soft:#C9BDA8; /* tekst drugorzędny */ --c-muted:#9A8E7B; /* podpisy, daty */ --c-blood-hover:#9E3832; --c-blood-active:#6F2623; --c-blood-deep:#2A1414; /* tło ramek z czerwonym akcentem */ /* komunikaty i status (tekst zawsze obok koloru) */ --c-ok:#7FC18F; --c-ok-bg:#16241A; --c-ok-line:#2F5A3A; --c-warn:#E0B85A; --c-warn-bg:#2A2212; --c-warn-line:#5E4A1F; --c-danger:#F08A80; --c-danger-bg:#2B1615; --c-danger-line:#5A2724; --c-info:#8FB4E0; --c-info-bg:#151E2A; --c-info-line:#2D4560; --c-live:#B02A24; /* relacje na żywo (tło z jasnym tekstem) */ /* stałe spoza palety: marki serwisów i tła osadzeń */ --c-white:#FFFFFF; --c-black:#000000; --brand-facebook:#1877F2; --brand-reddit:#FF4500; --brand-linkedin:#0A66C2; --brand-whatsapp:#25D366; --brand-wykop:#367AA9; /* typografia (wariant B, decyzja 09.10.2026) */ --font-head:"EB Garamond",Georgia,"Times New Roman",serif; --font-body:"Source Serif 4",Georgia,"Times New Roman",serif; --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px; --fs-h4:clamp(1.125rem,1.05rem + .3vw,1.25rem); --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem); --fs-h2:clamp(1.625rem,1.3rem + 1.3vw,2.25rem); --fs-h1:clamp(2rem,1.4rem + 2.6vw,3.5rem); --ls-label:.22em; /* etykiety wersalikami (DIABLO V • NOWY ROZDZIAŁ) */ /* rytm odstępów */ --s-half:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; /* kontener i siatka */ --maxw:1200px; --gutter:16px; --grid-gap:var(--s-3); --radius:2px; --shadow:0 1px 2px rgba(0,0,0,.5); --focus:var(--c-gold-light); /* tło z ornamentem: romby z planszy (złoto, bardzo słabe) */ --ornament:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23BA9562' stroke-opacity='.07'%3E%3Cpath d='M48 40l8 8-8 8-8-8z'/%3E%3Cpath d='M0 48h36M60 48h36' stroke-opacity='.035'/%3E%3C/g%3E%3C/svg%3E"); /* romb z planszy (nagłówki sekcji, separatory) - złoty i czerwony */ --diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23BA9562'/%3E%3C/svg%3E"); --diamond-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23B02A24'/%3E%3C/svg%3E"); /* dawne nazwy zmiennych - aliasy tokenów (klasy w szablonach bez zmian) */ --accent:var(--c-blood); /* tło przycisków i wyróżnień */ --accent-dark:var(--c-blood-hover);/* najechanie na przycisk (na ciemnym tle jaśniej) */ --accent-ink:var(--c-gold-light); /* tekst w kolorze akcentu (czerwień na czarnym ma za mały kontrast) */ --on-accent:var(--c-bone); /* tekst na czerwieni */ --dark-panel:var(--c-bg-deep); --bg:var(--c-obsidian); --surface:var(--c-surface); --surface-2:var(--c-surface-2); --ink:var(--c-bone); --ink-soft:var(--c-ink-soft); --muted:var(--c-muted); --line:var(--c-line); --line-soft:var(--c-line-soft); --link:var(--c-gold-light); --gold:var(--c-gold); --font:var(--font-body); color-scheme:dark; } @media (min-width:768px){:root{--gutter:24px}} /* fonty lokalnie (OFL, licencje w assets/fonts/) - pliki zmienne: wszystkie grubości w jednym pliku */ @font-face{font-family:"EB Garamond";src:url("assets/fonts/EBGaramond.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap} @font-face{font-family:"Source Serif 4";src:url("assets/fonts/SourceSerif4.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{overflow-x:clip; margin:0;color:var(--ink); background:var(--ornament) center top/96px 96px,radial-gradient(120% 80% at 50% 0%,var(--c-surface) 0%,var(--c-obsidian) 60%) fixed,var(--c-obsidian); background-color:var(--bg); font-family:var(--font-body);font-size:var(--fs-base);line-height:1.6; } img{max-width:100%;height:auto;display:block} /* T.8 (decyzja 15): ozdobne brzegi jak na planszy home - rzeźbiony ornament w wolnych pasach po bokach kolumny treści, przyklejony do brzegów okna (prawy - lustrzane odbicie). Tylko dekoracja: pod treścią (z-index -1, przykrywają go elementy z własnym tłem), bez klikania, od 1280 px (niżej pasy są za wąskie i plik się nie pobiera); im szersze okno, tym więcej ornamentu. Bez podpisu - ozdoba ramki strony, nie ilustracja treści (decyzja 16.10.2026, T.9). */ @media (min-width:1280px){ body::before,body::after{content:"";position:fixed;top:0;bottom:0;z-index:-1;width:calc((100% - var(--maxw)) / 2);pointer-events:none;opacity:.5; background:url("assets/img/ilustracje/brzeg-lewy-553.webp") left center/auto 100% no-repeat} body::before{left:0} body::after{right:0;transform:scaleX(-1)} /* T.9: bez ostrych poziomych krawędzi - ornament wyłania się łagodnie spod nagłówka (góra okna) i dół też zanika */ body::before,body::after{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 100px,var(--c-black) 320px,var(--c-black) calc(100% - 120px),transparent); mask-image:linear-gradient(to bottom,transparent 0,transparent 100px,var(--c-black) 320px,var(--c-black) calc(100% - 120px),transparent)} } a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.15;letter-spacing:.005em;margin:0 0 .5em} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} ::selection{background:var(--c-blood);color:var(--c-bone)} .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%} /* siatka 12 kolumn: .grid-12 > .span-N (na telefonie pełna szerokość) */ .grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)} .grid-12 > *{grid-column:1 / -1} @media (min-width:768px){ .span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:1 / -1} } .label-caps{font-family:var(--font-head);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold)} .skip-link{position:absolute;left:-999px;top:auto} .skip-link:focus{left:8px;top:8px;background:var(--c-bone);color:var(--c-obsidian);padding:8px 12px;z-index:200;border:2px solid var(--accent)} /* ---------- HEADER ---------- */ /* nagłówek według planszy (3.6): pasek „Niezależny portal fanów Diablo”, logo, menu, lupa i konto w jednym rzędzie */ .site-header{position:relative;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid var(--c-line)} .hdr-strip__inner{display:flex;align-items:center;gap:var(--s-2);min-height:28px} .hdr-strip__text{flex:none;font-family:var(--font-head);font-size:11px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold)} .hdr-strip__inner::after{content:"";flex:1;height:10px;background:var(--diamond) center/8px 8px no-repeat,linear-gradient(var(--c-line-ui),var(--c-line-ui)) center/100% 1px no-repeat} .site-header__inner{display:flex;align-items:center;gap:var(--s-3);padding-top:var(--s-1);padding-bottom:var(--s-2)} .logo{display:flex;align-items:center;flex:0 0 auto;line-height:0} .logo:hover{text-decoration:none} .logo__img{display:block;height:72px;width:auto} .search{margin-left:auto;display:flex;align-items:stretch;max-width:340px;flex:1 1 260px; border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)} .search input{flex:1;border:0;padding:9px 12px;font-size:14px;outline:none;min-width:0} .search button{border:0;background:var(--accent);color:var(--on-accent);padding:0 14px;cursor:pointer;display:flex;align-items:center} .search button:hover{background:var(--accent-dark)} .user-box{display:flex;align-items:center;gap:var(--s-1);flex:0 0 auto;font-size:13.5px} .hdr-actions{margin-left:auto;padding-left:var(--s-2);border-left:1px solid var(--c-line-ui)} .hdr-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink);border-radius:var(--radius);cursor:pointer} .hdr-icon:hover{color:var(--accent-ink);text-decoration:none} .hdr-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:var(--fs-sm);color:var(--ink-soft)} .hdr-search{position:relative} .hdr-search > summary{list-style:none} .hdr-search > summary::-webkit-details-marker{display:none} .hdr-search[open] > summary{color:var(--accent-ink)} .hdr-search__form{position:absolute;right:0;top:calc(100% + var(--s-1));z-index:70;display:flex;gap:var(--s-1);width:min(420px,80vw);padding:var(--s-2); background:var(--surface);border:1px solid var(--c-line-ui);border-radius:var(--radius);box-shadow:0 14px 34px rgba(0,0,0,.5)} .hdr-search__form .searchbox{flex:1} .user-box__link,.user-box__name{color:var(--ink-soft);white-space:nowrap} .user-box__name{font-weight:600} /* przyciski (3.5): czerwień z cienką złotą ramką i wewnętrzną linią jak na planszach; tekst krojem nagłówków */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);min-height:44px;padding:8px 22px; background:var(--accent);color:var(--on-accent);border:1px solid var(--gold);border-radius:var(--radius); box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent); font-family:var(--font-head);font-size:var(--fs-lg);font-weight:500;line-height:1.2;text-align:center;cursor:pointer} .btn:hover{background:var(--accent-dark);box-shadow:inset 0 0 0 2px var(--accent-dark),inset 0 0 0 3px color-mix(in srgb,var(--gold) 60%,transparent);text-decoration:none;color:var(--on-accent)} .btn:active{background:var(--c-blood-active)} .btn--sm{min-height:44px;padding:4px 14px;font-size:var(--fs-sm);box-shadow:none} /* mniejszy tekst, ale pole dotyku 44 px */ .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--c-line-ui);box-shadow:none} .btn--ghost:hover{background:var(--c-surface-3);color:var(--ink);box-shadow:none} .btn--link{min-height:44px;padding:0 0 2px;background:none;border:0;border-bottom:1px solid var(--gold);border-radius:0;box-shadow:none;color:var(--ink);font-size:var(--fs-base)} .btn--link:hover{background:none;box-shadow:none;color:var(--accent-ink)} .btn .icon{flex:none} .btn--block{display:block;width:100%} /* ---------- NAV ---------- */ /* menu (komputer): pozycje krojem nagłówków, aktywna złotem z kreską pod spodem (tekst + kreska, nie sam kolor) */ .main-nav{margin-left:auto} .main-nav__inner{display:flex;align-items:center} .main-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s-1)} .main-nav__list a{display:flex;align-items:center;min-height:44px;padding:0 var(--s-2);color:var(--ink);font-family:var(--font-head);font-size:var(--fs-lg);letter-spacing:.01em} .main-nav__list a:hover{color:var(--accent-ink);text-decoration:none} /* ---------- LAYOUT ---------- */ .wrap{padding:18px var(--gutter) 28px} /* ten sam margines co nagłówek, hero i stopka (3.19) */ .layout{display:block} /* bez panelu bocznego - pełna szerokość według plansz (decyzja 3, zadanie 3.6) */ .layout--single{display:block;max-width:900px;margin:0 auto} .main-col{min-width:0} .side-col{display:none} /* panel boczny wyłączony w inc/sidebar.php - pusty element nie zajmuje miejsca */ /* ---------- BREADCRUMB ---------- */ .breadcrumb{font-size:var(--fs-sm);color:var(--ink-soft);margin:0 0 var(--s-2)} .breadcrumb a{color:var(--ink);display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px} /* pole dotyku ≥ 44 px (szerokość też - krótkie „Gry”, 3.22) */ .breadcrumb a:hover{color:var(--accent-ink)} .breadcrumb span{margin:0 8px;color:var(--gold)} /* ---------- SLIDER ---------- */ .slider{position:relative;background:var(--c-black);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:18px} .slider__track{display:flex;transition:transform .5s ease} .slide{position:relative;min-width:100%;aspect-ratio:16/7;background:var(--surface-2)} .slide img{width:100%;height:100%;object-fit:cover;opacity:.92} .slide__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 18px; background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));color:var(--on-accent)} .slide__cat{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:3px;margin-bottom:8px} .slide__title{font-size:22px;margin:0 0 6px;color:var(--on-accent);line-height:1.2} .slide__title a{color:var(--on-accent)} .slide__lead{font-size:13.5px;color:var(--ink);margin:0;max-width:640px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .slider__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:var(--on-accent); border:0;width:38px;height:52px;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center} .slider__nav:hover{background:var(--accent)} .slider__nav--prev{left:0;border-radius:0 4px 4px 0} .slider__nav--next{right:0;border-radius:4px 0 0 4px} .slider__dots{position:absolute;bottom:10px;right:16px;display:flex;gap:6px} .slider__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);border:0;cursor:pointer;padding:0} .slider__dot.is-active{background:var(--accent)} /* ---------- SECTION HEAD ---------- */ /* nagłówek sekcji (3.5): tytuł, linia ze złotym rombem, odnośnik „Wszystkie … →” */ .section-head{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-1) 0 var(--s-2)} .section-head::before{content:"";order:1;flex:1 1 40px;min-width:40px;height:10px; background:var(--diamond) center/9px 9px no-repeat,linear-gradient(var(--c-line-ui),var(--c-line-ui)) center/100% 1px no-repeat} .section-head h1,.section-head h2{order:0;font-size:var(--fs-h2);margin:0;color:var(--ink);line-height:1.1} .section-head .more{order:2;flex:none;display:inline-flex;align-items:flex-end;gap:6px;min-height:44px;font-size:var(--fs-sm);color:var(--ink);border-bottom:1px solid var(--gold);padding:0 0 4px} .section-head .more:hover{color:var(--accent-ink);text-decoration:none} .section-head--sm h1,.section-head--sm h2{font-size:var(--fs-h3)} @media (max-width:640px){.section-head{flex-wrap:wrap;row-gap:0}.section-head h1,.section-head h2{flex-basis:100%}} /* telefon: tytuł w osobnym wierszu, linia i odnośnik pod nim */ /* ---------- NEWS LIST ---------- */ /* listy wpisów (3.9): karty .ncard w dwóch kolumnach, wpis wyróżniony na całą szerokość */ .news-list{display:grid;grid-template-columns:1fr;gap:var(--s-3)} @media (min-width:768px){.news-list{grid-template-columns:repeat(2,minmax(0,1fr))}.news-list > .ncard--feature{grid-column:1 / -1}} .news-item{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)} .news-item__thumb{flex:0 0 168px;border-radius:3px;overflow:hidden;background:var(--line-soft)} .news-item__thumb img{width:168px;height:110px;object-fit:cover} .news-item__body{min-width:0;display:flex;flex-direction:column} .news-item__cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-ink);margin-bottom:3px} .news-item__title{font-size:17px;margin:0 0 5px;line-height:1.25} .news-item__title a{color:var(--ink)} .news-item__title a:hover{color:var(--accent-ink);text-decoration:none} .news-item__lead{color:var(--ink-soft);font-size:13.5px;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news-item__meta{margin-top:auto;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px;align-items:center} .news-item__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);display:inline-block} .meta-ico{display:inline-flex;align-items:center;gap:4px} .meta-ico svg{opacity:.7} /* ---------- ARTICLE CARD GRID (lista artykułów) ---------- */ .card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column} .card__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover} .card__body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1} .card__cat{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--accent-ink);letter-spacing:.4px;margin-bottom:4px} .card__title{font-size:16px;margin:0 0 6px} .card__title a{color:var(--ink)} .card__title a:hover{color:var(--accent-ink);text-decoration:none} .card__lead{font-size:13px;color:var(--ink-soft);margin:0 0 10px} .card__meta{margin-top:auto;font-size:12px;color:var(--muted);display:flex;gap:12px} /* ---------- PANELS (sidebar) ---------- */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); margin-bottom:18px;box-shadow:var(--shadow);overflow:hidden} .panel__title{font-size:15px;margin:0;padding:10px 14px;background:var(--accent);color:var(--on-accent);font-weight:700;letter-spacing:.3px} .panel__title--dark{background:var(--dark-panel)} .panel__title--dark::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:8px;vertical-align:middle} .panel__list{list-style:none;margin:0;padding:6px 0} .panel__list li{border-bottom:1px solid var(--line-soft)} .panel__list li:last-child{border-bottom:0} .panel__list a{display:block;padding:9px 14px;font-size:13.5px;color:var(--ink);line-height:1.35} .panel__list a:hover{background:var(--line-soft);color:var(--accent-ink);text-decoration:none} .panel__all{display:block;margin:10px 14px 14px;text-align:center} .panel__empty{padding:12px 14px;color:var(--muted);font-size:13px} /* Najczęściej czytane - ciemny panel z projektu */ .panel--popular .popular-list{list-style:none;margin:0;padding:0;background:var(--dark-panel)} .popular-list__item{padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.07)} .popular-list__item:last-child{border-bottom:0} .popular-list__meta{display:flex;gap:8px;align-items:center;margin-bottom:3px} .popular-list__views{color:var(--accent-ink);font-weight:700;font-size:12px} .popular-list__cat{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.3px} .popular-list__item a{color:var(--ink);font-size:13px;line-height:1.35;display:block} .popular-list__item a:hover{color:var(--on-accent);text-decoration:underline} /* Reklama */ .ads-box{padding:14px} .ad+.ad{margin-top:12px} .ad img{margin:0 auto;border-radius:3px} .ad__placeholder{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 10px,var(--surface-2) 10px,var(--surface-2) 20px); border:1px dashed var(--line);color:var(--muted);text-align:center;padding:26px 14px;border-radius:3px;font-size:13px;margin:0} /* Partnerzy */ .partners-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px} .partners-grid__item{display:flex;align-items:center;justify-content:center;min-height:44px; border:1px solid var(--line-soft);border-radius:3px;background:var(--c-white);padding:6px;filter:grayscale(1);transition:filter .2s} .partners-grid__item:hover{filter:grayscale(0);text-decoration:none} .partners-grid__name{font-size:11px;color:var(--muted);text-align:center} /* ---------- SINGLE POST / ARTICLE ---------- */ .article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:22px 26px} .article__header{border-bottom:1px solid var(--line-soft);padding-bottom:12px;margin-bottom:16px} .article__cat{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--accent-ink);letter-spacing:.4px} .article__title{font-size:27px;color:var(--accent-ink);margin:6px 0 10px;line-height:1.2} .article__meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted);align-items:center} .article__meta b{color:var(--ink-soft);font-weight:600} .article__hero{margin:0 0 18px;border-radius:3px;overflow:hidden} .article__hero img{width:100%;height:auto;object-fit:cover} /* Spis treści */ .toc{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:3px;padding:12px 16px;margin:0 0 20px} .toc__title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);margin:0 0 8px} .toc__list{list-style:none;margin:0;padding:0;counter-reset:toc} .toc__list li{margin:2px 0} .toc__list li.lvl-3{margin-left:18px} .toc__list a{font-size:13.5px;color:var(--link)} .toc__list li.lvl-2 a::before{counter-increment:toc;content:counter(toc) ". ";color:var(--muted);font-weight:600} /* Treść artykułu */ .article__content{font-size:15.5px;line-height:1.7;color:var(--ink)} .article__content p{margin:0 0 1.05em} .article__content .lead-in{font-size:17px;color:var(--ink-soft);font-weight:500} .article__content h2.art-heading{font-size:20px;color:var(--ink);margin:1.4em 0 .5em;padding-top:6px} .article__content h3.art-heading{font-size:17px;color:var(--ink);margin:1.2em 0 .4em} .article__content img{margin:1em auto;border-radius:3px} .article__content ul,.article__content ol{margin:0 0 1.05em;padding-left:22px} .article__content li{margin:.3em 0} .article__content a{color:var(--link);text-decoration:underline} .article__content blockquote{border-left:3px solid var(--accent);margin:1em 0;padding:.4em 0 .4em 16px;color:var(--ink-soft);background:var(--surface-2)} .article__content table{border-collapse:collapse;width:100%;margin:1em 0;font-size:14px} .article__content th,.article__content td{border:1px solid var(--line);padding:8px 10px;text-align:left} .article__content th{background:var(--line-soft)} .post-nav-back{margin-bottom:14px} /* ---------- COMMENTS ---------- */ .comments{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px;margin-top:18px} .comments__title{font-size:18px;border-bottom:2px solid var(--accent);padding-bottom:8px;margin:0 0 16px} .comment{border-bottom:1px solid var(--line-soft);padding:12px 0} .comment:last-of-type{border-bottom:0} .comment__head{display:flex;align-items:center;gap:10px;margin-bottom:5px} .comment__avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto} .comment__author{font-weight:600;color:var(--ink)} .comment__date{font-size:12px;color:var(--muted)} .comment__body{margin:0;color:var(--ink);font-size:14.5px;white-space:pre-line} .comment-form{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px} .comment-form h3{font-size:15px;margin:0 0 10px} .comment-login-hint{background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:12px 14px;font-size:14px;color:var(--ink-soft)} /* ---------- FORMS ---------- */ .form-field{margin-bottom:14px} .form-field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px;color:var(--ink-soft)} .form-field input[type=text],.form-field input[type=email],.form-field input[type=password], .form-field input[type=search],.form-field textarea,.form-field select{ width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink)} .form-field textarea{min-height:120px;resize:vertical} .form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:2px solid var(--focus);border-color:var(--focus)} .form-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-soft)} .form-check input{margin-top:3px} .form-hint{font-size:12px;color:var(--muted);margin-top:4px} .form-note{font-size:12.5px;color:var(--muted)} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .auth-box{max-width:440px;margin:10px auto 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px} .auth-box h1{font-size:22px;margin:0 0 6px} .auth-box .sub{color:var(--ink-soft);font-size:14px;margin:0 0 18px} .auth-alt{text-align:center;font-size:13.5px;color:var(--ink-soft);margin-top:16px} /* ---------- FLASH ---------- */ .flash{padding:11px 15px;border-radius:var(--radius);margin-bottom:16px;font-size:14px;border:1px solid} .flash-ok{background:var(--c-ok-bg);border-color:var(--c-ok-line);color:var(--c-ok)} .flash-error{background:var(--c-danger-bg);border-color:var(--c-danger-line);color:var(--c-danger)} /* ---------- PAGINATION ---------- */ .pagination{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-4) 0 var(--s-1);justify-content:center} .pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px; border:1px solid var(--c-line);border-radius:var(--radius);font-family:var(--font-head);font-size:var(--fs-lg);background:transparent;color:var(--ink)} .pagination a:hover{border-color:var(--gold);text-decoration:none;color:var(--accent-ink)} .pagination .is-active{background:var(--accent);border-color:var(--gold);color:var(--on-accent);font-weight:600} .pagination .is-disabled{opacity:.45;pointer-events:none} /* ---------- STATIC PAGE ---------- */ .page-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 28px} .page-box h1{font-size:25px;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:10px;margin:0 0 16px} .page-box h2{font-size:19px;color:var(--ink);margin:1.3em 0 .5em} .page-content{font-size:15px;line-height:1.7;color:var(--ink)} .page-content p{margin:0 0 1em} .page-content ul,.page-content ol{padding-left:22px;margin:0 0 1em} /* ---------- ARCHIVE ---------- */ .archive-head{background:var(--dark-panel);color:var(--on-accent);text-align:center;font-size:15px;font-weight:700;letter-spacing:2px;padding:10px;border-radius:4px 4px 0 0;text-transform:uppercase} .archive-box{background:var(--surface);border:1px solid var(--line);border-radius:0 0 4px 4px;box-shadow:var(--shadow);padding:20px 24px} .archive-intro{background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:12px 16px;font-size:13.5px;color:var(--ink-soft);margin-bottom:18px} .archive-year{font-size:16px;color:var(--accent-ink);font-weight:700;margin:18px 0 8px;border-bottom:1px solid var(--line-soft);padding-bottom:5px} .archive-month{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px} .archive-month__name{flex:0 0 130px;font-weight:600;color:var(--ink)} .archive-month__ranges{display:flex;flex-wrap:wrap;gap:4px} .archive-month__ranges a{color:var(--link);padding:1px 5px;border-radius:3px} .archive-month__ranges a:hover{background:var(--line-soft);text-decoration:none} .archive-month__sep{color:var(--line)} /* ---------- ADMIN LINK BAR / MISC ---------- */ .empty-state{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:40px 20px;text-align:center;color:var(--muted)} /* ---------- FOOTER ---------- */ .site-footer{margin-top:var(--s-5)} .footer-partners{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0} .marquee{overflow:hidden;position:relative;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,var(--c-black) 6%,var(--c-black) 94%,transparent);mask-image:linear-gradient(90deg,transparent,var(--c-black) 6%,var(--c-black) 94%,transparent)} .marquee__track{display:flex;align-items:center;gap:58px;width:max-content;animation:marquee 42s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__item{display:inline-flex;align-items:center;justify-content:center;height:68px;filter:grayscale(1);opacity:.8} .marquee__item:hover{filter:grayscale(0);opacity:1} .marquee__item img{max-height:64px;width:auto} .marquee__name{font-size:20px;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:.2px} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* stopka według planszy (3.6): linia z rombem, logo, odnośniki, pionowa kreska, dopisek o marce; niżej prawa i RSS */ .footer-main{color:var(--ink-soft);padding:0 0 var(--s-3)} .footer-main .container::before{content:"";display:block;height:10px;margin-bottom:var(--s-3); background:var(--diamond) center/9px 9px no-repeat,linear-gradient(var(--c-line-ui),var(--c-line-ui)) center/100% 1px no-repeat} .footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)} .footer-logo{flex:none;line-height:0} .footer-logo img{height:56px;width:auto} .footer-nav ul{display:flex;flex-wrap:wrap;gap:0 var(--s-3);list-style:none;margin:0;padding:0} .footer-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--ink);font-size:var(--fs-sm)} .footer-nav a:hover{color:var(--accent-ink)} .footer-copy{white-space:nowrap;margin-left:var(--s-1);color:var(--muted)} /* © z rokiem przy dopisku (3.22) */ .footer-brand{flex:0 1 auto;margin:0 0 0 auto;padding-left:var(--s-4);border-left:1px solid var(--c-line-ui);font-size:13px;line-height:1.5;color:var(--ink-soft)} /* „Ustawienia prywatności” (5.6): wygląda jak odnośnik stopki, otwiera baner cookies */ .footer-privacy{margin:0} .footer-privacy__btn{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:var(--fs-sm);cursor:pointer} .footer-privacy__btn:hover{color:var(--accent-ink)} .footer-privacy__btn[hidden]{display:none} /* bez JavaScriptu przycisk nic by nie zrobił */ @media (max-width:767px){ .footer-row{flex-direction:column;align-items:flex-start;gap:var(--s-1)} .footer-brand{flex-basis:auto;margin-left:0;padding-left:0;border-left:0;padding-top:var(--s-1);border-top:1px solid var(--c-line)} } /* ============================================================ Odpowiedzi na komentarze ============================================================ */ .comment__reply-btn{ background:0;border:0;padding:4px 0;margin-top:2px;cursor:pointer;font-family:inherit; font-size:13px;font-weight:600;color:var(--accent-ink); } .comment__reply-btn:hover{text-decoration:underline} .comment__replies{margin:10px 0 0 14px;padding-left:16px;border-left:2px solid var(--line)} .comment__replies--flat{margin-left:0;padding-left:12px;border-left-style:dashed} .comment__replyto{ margin:0 0 6px;font-size:12.5px;color:var(--muted); } .comment__replyto a{color:var(--link);font-weight:600} .comment--reply{border-bottom:0;padding:10px 0} .comment--reply .comment__avatar{width:28px;height:28px;font-size:12px} .reply-notice{ background:var(--line-soft);border-left:3px solid var(--accent);border-radius:3px; padding:9px 12px;margin:0 0 10px;font-size:13.5px;color:var(--ink-soft); } .reply-cancel{ background:0;border:0;padding:0 0 0 8px;cursor:pointer;font-family:inherit; font-size:13px;font-weight:600;color:var(--link);text-decoration:underline; } /* ============================================================ Ankieta (panel boczny) ============================================================ */ .poll{padding:14px} .poll__question{margin:0 0 12px;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4} .poll__options{list-style:none;margin:0 0 12px;padding:0} .poll__options li{margin:0 0 7px} .poll__choice{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:14px;color:var(--ink-soft);line-height:1.4} .poll__choice input{accent-color:var(--accent);margin-top:2px;flex:0 0 auto} .poll__choice:hover{color:var(--ink)} .poll__options--preview li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-soft)} .poll__dot{width:11px;height:11px;border:2px solid var(--line);border-radius:50%;flex:0 0 auto;margin-top:4px} .poll__btn{width:100%} .poll__hint{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.5} .poll__results{list-style:none;margin:0;padding:0} .poll__result{margin:0 0 11px;position:relative} .poll__result-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:4px} .poll__label{color:var(--ink);line-height:1.35} .poll__pct{font-weight:700;color:var(--ink);flex:0 0 auto} .poll__bar{height:8px;background:var(--line-soft);border-radius:99px;overflow:hidden} .poll__bar span{display:block;height:100%;background:var(--accent);border-radius:99px} .poll__result.is-mine .poll__bar span{background:var(--accent)} .poll__result.is-mine .poll__label::after{content:" (Twój głos)";color:var(--accent-ink);font-weight:600;font-size:12px} .poll__votes{font-size:11.5px;color:var(--muted)} .poll__total{margin:12px 0 0;font-size:13px;color:var(--ink-soft);border-top:1px solid var(--line-soft);padding-top:9px} .poll__closed{color:var(--muted);font-style:italic} /* ============================================================ Pasek sortowania po tematach ============================================================ */ /* 3.9: filtr gier jako przyciski z planszy news (prostokąty ze złotą obwódką, aktywny na czerwieni) */ .topicbar{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2);min-width:0} .topicbar__label{ flex:0 0 auto;font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.05em;color:var(--muted); } .topicbar__scroll{display:flex;flex-wrap:wrap;gap:var(--s-1)} .topicbar__scroll::-webkit-scrollbar{height:5px} .topicbar__scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px} .topicbar__item{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);border:1px solid var(--c-line-ui);border-radius:var(--radius); font-family:var(--font-head);font-size:var(--fs-base);color:var(--ink);background:transparent;white-space:nowrap} .topicbar__item:hover{border-color:var(--gold);color:var(--accent-ink);text-decoration:none} .topicbar__item.is-active{background:var(--accent);border-color:var(--gold);color:var(--on-accent)} .topicbar__item.is-active:hover{background:var(--accent-dark);color:var(--on-accent)} /* Lista rozwijana tematów - tylko na telefonie */ .topicdrop{display:none;width:100%;position:relative} .topicdrop__toggle{ display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 14px;cursor:pointer; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); list-style:none;font-size:15px;color:var(--ink); } .topicdrop__toggle::-webkit-details-marker{display:none} .topicdrop__label{ flex:0 0 auto;font-size:11.5px;font-weight:700;text-transform:uppercase; letter-spacing:.05em;color:var(--muted); } .topicdrop__current{flex:1;font-weight:700;color:var(--ink)} .topicdrop__arrow{flex:0 0 auto;color:var(--accent-ink);transition:transform .18s ease} .topicdrop[open] .topicdrop__toggle{border-color:var(--accent);border-radius:var(--radius) var(--radius) 0 0} .topicdrop[open] .topicdrop__arrow{transform:rotate(180deg)} .topicdrop__menu{ position:absolute;left:0;right:0;top:100%;z-index:30; background:var(--surface);border:1px solid var(--accent);border-top:0; border-radius:0 0 var(--radius) var(--radius); max-height:60vh;overflow-y:auto;box-shadow:0 12px 28px rgba(0,0,0,.18); } .topicdrop__item{ display:block;padding:13px 16px;font-size:15.5px;color:var(--ink-soft); border-bottom:1px solid var(--line-soft); } .topicdrop__item:last-child{border-bottom:0} .topicdrop__item:hover{background:var(--line-soft);color:var(--ink);text-decoration:none} .topicdrop__item.is-active{background:var(--accent);color:var(--on-accent);font-weight:700} /* zawężenie: wszystko / newsy / artykuły */ .typefilter{display:flex;gap:8px;margin:0 0 14px} .typefilter__item{ padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink-soft); } .typefilter__item:hover{background:var(--line-soft);color:var(--ink);text-decoration:none} .typefilter__item.is-active{background:var(--dark-panel);border-color:var(--dark-panel);color:var(--on-accent)} /* etykieta tematu przy tytule wpisu */ .article__topic{ display:inline-block;margin-left:6px;padding:3px 10px;border-radius:99px; background:var(--line-soft);border:1px solid var(--line); font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em; } .article__topic:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);text-decoration:none} /* ============================================================ Źródło pod tekstem ============================================================ */ .article__source{ margin:22px 0 0;padding:12px 16px;background:var(--line-soft); border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0; font-size:14.5px;color:var(--ink-soft); } .article__source span{font-weight:700;color:var(--ink)} /* ============================================================ Zgłoś błąd ============================================================ */ .report{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); margin-top:16px;box-shadow:var(--shadow); } .report__toggle{ display:flex;align-items:center;gap:9px;padding:13px 16px;cursor:pointer; font-size:14.5px;font-weight:600;color:var(--ink-soft);list-style:none; } .report__toggle::-webkit-details-marker{display:none} .report__toggle:hover{color:var(--accent-ink)} .report__toggle svg{flex:0 0 auto;color:var(--accent-ink)} .report[open] .report__toggle{border-bottom:1px solid var(--line-soft);color:var(--ink)} .report__body{padding:14px 16px 18px} .report__hint{margin:0 0 12px;font-size:14px;color:var(--ink-soft);line-height:1.55} /* ============================================================ Profil użytkownika ============================================================ */ .profile{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:20px;margin-bottom:18px;box-shadow:var(--shadow); } .profile__head{display:flex;align-items:center;gap:16px;margin-bottom:18px} .profile__avatar{ display:grid;place-items:center;width:64px;height:64px;border-radius:50%; background:var(--accent);color:var(--on-accent);font-size:28px;font-weight:700;flex:0 0 auto; } .profile__name{margin:0 0 5px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em} .profile__role{ display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px; font-weight:700;text-transform:uppercase;letter-spacing:.03em; background:var(--line-soft);color:var(--ink-soft); } .profile__role--admin{background:var(--c-danger-bg);color:var(--c-danger)} .profile__role--editor{background:var(--c-warn-bg);color:var(--accent-ink)} .profile__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0} .profile__stat{ background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius);padding:12px 14px; } .profile__stat dt{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px} .profile__stat dd{margin:0;font-size:15px;color:var(--ink);font-weight:600} .profile__bio{margin:16px 0 0;font-size:15px;color:var(--ink-soft);line-height:1.6} .profile__list{list-style:none;margin:0 0 18px;padding:0;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .profile__list li{padding:13px 16px;border-bottom:1px solid var(--line-soft)} .profile__list li:last-child{border-bottom:0} .profile__comment{margin:0 0 5px;font-size:14.5px;color:var(--ink);line-height:1.55} .profile__date{font-size:12.5px;color:var(--muted)} .profile__date a{color:var(--link);font-weight:600} /* ============================================================ Captcha obrazkowa ============================================================ */ .captcha{display:flex;align-items:center;gap:10px;margin-bottom:8px} .captcha__img{ display:block;border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);max-width:100%;height:auto; } .captcha__reload{ flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);color:var(--ink-soft);font-size:19px;line-height:1;cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; } .captcha__reload:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .captcha__input{letter-spacing:.18em;text-transform:uppercase;font-weight:600} /* ============================================================ Galeria w treści + podgląd zdjęcia ============================================================ */ .kp-gallery{ display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;margin:22px 0; } .kp-gallery__item{margin:0} .kp-gallery__item a{display:block;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--line-soft)} .kp-gallery__item img{ display:block;width:100%;aspect-ratio:4/3;object-fit:cover; transition:transform .25s ease,filter .2s ease; } .kp-gallery__item a:hover img{transform:scale(1.05);filter:brightness(1.05)} .kp-gallery__item a::after{ content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.12);border-radius:var(--radius);pointer-events:none; } /* podgląd na pełnym ekranie */ .lightbox{ position:fixed;inset:0;z-index:2000;display:none; background:rgba(0,0,0,.94);align-items:center;justify-content:center; } .lightbox.is-open{display:flex} .lightbox__img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:4px} .lightbox__btn{ position:absolute;top:50%;transform:translateY(-50%); width:52px;height:52px;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.14);color:var(--on-accent);font-size:26px;line-height:1; display:grid;place-items:center;transition:background .15s ease; } .lightbox__btn:hover{background:var(--accent)} .lightbox__btn--prev{left:16px} .lightbox__btn--next{right:16px} .lightbox__close{ position:absolute;top:16px;right:16px;width:46px;height:46px;border:0;border-radius:50%; background:rgba(255,255,255,.14);color:var(--on-accent);font-size:24px;cursor:pointer;transition:background .15s ease; } .lightbox__close:hover{background:var(--accent)} .lightbox__count{ position:absolute;bottom:20px;left:50%;transform:translateX(-50%); color:var(--on-accent);font-size:14px;background:rgba(0,0,0,.45);padding:6px 14px;border-radius:99px; } /* ============================================================ Podsumowanie: plusy i minusy ============================================================ */ .verdict{ margin:26px 0 0;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow); } .verdict__title{ margin:0;padding:13px 18px;background:var(--dark-panel);color:var(--on-accent); font-size:16px;font-weight:700;letter-spacing:-.01em; } .verdict__cols{display:grid;grid-template-columns:1fr 1fr} .verdict__col{padding:16px 18px} .verdict__col--pros{border-right:1px solid var(--line-soft)} .verdict__head{ margin:0 0 10px;font-size:14px;font-weight:700;text-transform:uppercase; letter-spacing:.04em;display:flex;align-items:center;gap:8px; } .verdict__col--pros .verdict__head{color:var(--c-ok)} .verdict__col--cons .verdict__head{color:var(--c-danger)} .verdict__sign{ display:grid;place-items:center;width:22px;height:22px;border-radius:50%; font-size:15px;font-weight:700;color:var(--on-accent); } .verdict__col--pros .verdict__sign{background:var(--c-ok-line)} .verdict__col--cons .verdict__sign{background:var(--c-danger-line)} .verdict__list{margin:0;padding:0;list-style:none} .verdict__list li{ position:relative;padding:5px 0 5px 18px;font-size:15px;color:var(--ink);line-height:1.5; } .verdict__list li::before{ content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%; } .verdict__col--pros .verdict__list li::before{background:var(--c-ok-line)} .verdict__col--cons .verdict__list li::before{background:var(--c-danger-line)} /* ---------- RESPONSIVE ---------- */ @media (max-width:980px){ .panel--popular,.panel--partners{display:block} } /* --- Tablety i mniejsze ekrany --- */ @media (max-width:760px){ /* Naglowek: zwarty uklad, logo mniejsze, wyszukiwarka w osobnym rzedzie */ .site-header__inner{flex-wrap:wrap;gap:10px 12px;padding:10px 16px} .logo{order:1} .logo__img{height:56px} .user-box{order:2;margin-left:auto;gap:8px} .search{order:3;max-width:none;flex-basis:100%;margin-left:0} .card-grid{grid-template-columns:1fr} .news-item{flex-direction:column} .news-item__thumb{flex-basis:auto} .news-item__thumb img{width:100%;height:auto;aspect-ratio:16/9} .article,.comments,.page-box,.archive-box{padding-left:16px;padding-right:16px} .article__title{font-size:22px} .archive-month__name{flex-basis:100%} } /* --- Telefony --- */ @media (max-width:640px){ /* Wieksza baza tekstu - czytelnosc na malym ekranie */ body{font-size:16px;line-height:1.6} /* Pola formularzy min. 16px - blokuje samoczynne przyblizanie w iOS */ .search input, .form-field input[type=text],.form-field input[type=email],.form-field input[type=password], .form-field input[type=search],.form-field textarea,.form-field select{font-size:16px} /* Wygodne cele dotykowe (min. 44px) */ .search input{padding:12px 14px;min-height:44px} .search button{padding:0 18px;min-width:54px} .btn{display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:10px 18px;font-size:15px} .btn--sm{min-height:44px;padding:10px 15px;font-size:14px} .user-box{font-size:14.5px;gap:10px} .user-box__link,.user-box__name{display:inline-flex;align-items:center;min-height:44px} .main-nav__list a{padding:14px 16px;font-size:15.5px} .pagination a,.pagination span{padding:11px 16px;font-size:15px;min-width:46px;text-align:center} .toc__list a{font-size:15px;padding:6px 0;display:inline-block} .archive-month__ranges a{padding:8px 10px;font-size:14.5px} .popular-list__item{padding:11px 14px} .popular-list__item a{font-size:14.5px;padding:3px 0} /* Slider: wyzszy kadr, zeby podpis nie zaslanial zdjecia */ .slide{aspect-ratio:4/3} .slide__cap{padding:44px 16px 16px} .slide__title{font-size:19px;line-height:1.3;margin-bottom:5px} .slide__lead{display:none} .slider__nav{width:34px;height:52px;font-size:20px;top:30%} /* nad podpisem - nie zasłania kategorii i tytułu */ .slider__dots{bottom:9px;right:12px} .slider__dot{width:11px;height:11px} /* Listy wpisow */ .section-head .more{font-size:14px} .news-item{padding:14px;gap:12px} .news-item__cat{font-size:12px} .news-item__title{font-size:17.5px;line-height:1.3} .news-item__lead{font-size:14.5px;line-height:1.55} .news-item__meta{font-size:13px;gap:10px} /* Artykul */ .article__title{font-size:23px;line-height:1.25} .article__meta{font-size:13px;gap:10px} .article__content{font-size:16.5px;line-height:1.75} .article__content h2.art-heading{font-size:20px} .article__content h3.art-heading{font-size:18px} .article__content .lead-in{font-size:17.5px} .article__content table{font-size:15px} .article__content th,.article__content td{padding:9px 8px} /* Komentarze i formularze */ .comments{padding:18px 16px} .comments__title{font-size:17px} .comment__body{font-size:15.5px} .comment__date{font-size:13px} .form-field label{font-size:14.5px} .form-hint,.form-note{font-size:13px} .form-check{font-size:14px} .comment-login-hint{font-size:15px} .auth-box{padding:22px 18px} /* Ankieta i odpowiedzi na telefonie */ .poll__question{font-size:15.5px} .poll__choice{font-size:15px;padding:5px 0} .poll__choice input{width:19px;height:19px} .poll__options--preview li{font-size:15px;padding:4px 0} .poll__result-top{font-size:14.5px} .poll__hint{font-size:14px} .poll__total{font-size:14px} .comment__reply-btn{font-size:14.5px;min-height:44px;display:inline-flex;align-items:center;padding:0} .comment__replies{margin-left:0;padding-left:10px} .comment__replies--flat{padding-left:8px} .comment__replyto{font-size:13px} .kp-gallery{grid-template-columns:repeat(2,1fr);gap:8px} .verdict__cols{grid-template-columns:1fr} .verdict__col--pros{border-right:0;border-bottom:1px solid var(--line-soft)} .verdict__title{font-size:15.5px;padding:12px 15px} .verdict__list li{font-size:15.5px;padding-left:17px} .lightbox__btn{width:46px;height:46px;font-size:22px} .lightbox__btn--prev{left:8px} .lightbox__btn--next{right:8px} .captcha__img{width:100%;max-width:220px} /* wygodne pola formularzy na telefonie */ .form-field input[type=text],.form-field input[type=email],.form-field input[type=password], .form-field input[type=search],.form-field select{min-height:46px} .captcha__reload{width:46px;height:46px} .captcha__input{font-size:17px} .reply-notice{font-size:14.5px} .reply-cancel{font-size:14.5px;min-height:44px;display:inline-flex;align-items:center} /* Tematy: na telefonie lista rozwijana zamiast paska */ .topicbar{display:block;background:0;border:0;padding:0;box-shadow:none;margin-bottom:14px} .topicbar__label,.topicbar__scroll{display:none} .topicdrop{display:block !important} .typefilter__item{flex:1;text-align:center;font-size:14.5px;padding:10px 8px} .article__topic{font-size:12.5px;padding:5px 11px;margin-left:0;margin-top:6px} .article__source{font-size:14.5px;padding:12px 14px} .report__toggle{font-size:15px;padding:15px 14px;min-height:48px} .report__body{padding:14px} .profile__head{gap:12px} .profile__avatar{width:54px;height:54px;font-size:24px} .profile__name{font-size:19px} .profile__stats{grid-template-columns:1fr;gap:9px} .profile__stat{padding:11px 13px} .profile__list li{padding:12px 14px} /* Panele boczne i stopka */ .panel__title{font-size:16px;padding:12px 14px} .partners-grid__name{font-size:12.5px} .marquee__name{font-size:17px} .marquee__item{height:54px} .marquee__item img{max-height:50px} .marquee__track{gap:40px} .footer-partners{padding:18px 0} .credit{font-size:12.5px} } /* --- Male telefony --- */ @media (max-width:420px){ .partners-grid{grid-template-columns:repeat(2,1fr)} .logo__img{height:48px} .user-box{font-size:13.5px;gap:8px} .slide{aspect-ratio:3/2} .slide__title{font-size:18px} .news-item__title{font-size:17px} .article__title{font-size:21px} } /* ============================================================ Baner cookies (RODO) ============================================================ */ .cookie-banner{ position:fixed;left:0;right:0;bottom:0;z-index:1200; background:var(--surface);border-top:3px solid var(--accent); box-shadow:0 -6px 26px rgba(0,0,0,.16); transform:translateY(110%);transition:transform .3s ease; } .cookie-banner.is-visible{transform:translateY(0)} .cookie-banner__inner{display:flex;align-items:center;gap:22px;padding:15px 16px} .cookie-banner__text{min-width:0} .cookie-banner__text strong{display:block;font-size:15px;color:var(--ink);margin-bottom:3px} .cookie-banner__text p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.55} .cookie-banner__text a{color:var(--accent-ink);font-weight:600;text-decoration:underline} .cookie-banner__actions{display:flex;gap:10px;flex:0 0 auto;margin-left:auto} .cookie-btn{ border:0;border-radius:var(--radius);padding:11px 22px;font-size:14px;font-weight:600; cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease; } .cookie-btn--accept{background:var(--accent);color:var(--on-accent)} .cookie-btn--accept:hover{background:var(--accent-dark)} .cookie-btn--reject{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)} .cookie-btn--reject:hover{background:var(--surface-2);color:var(--ink)} @media (max-width:640px){ .cookie-banner__inner{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px} .cookie-banner__actions{margin-left:0} .cookie-btn{flex:1;padding:12px;min-height:44px;font-size:15px} .cookie-banner__text p{font-size:14px} } @media (prefers-reduced-motion:reduce){ .cookie-banner{transition:none} } /* ---------- TAGI ---------- */ .article__tags{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px} .article__tags span{font-weight:700;color:var(--ink);margin-right:4px} .article__tags a,.tagcloud a{display:inline-block;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);background:var(--surface);text-decoration:none} .article__tags a:hover,.tagcloud a:hover{border-color:var(--accent-ink);color:var(--accent-ink);text-decoration:none} .tagcloud{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;font-size:13px} /* ---------- KONKURSY ---------- */ .contest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .contest-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column} .contest-card__img{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,var(--accent),var(--accent-dark))} .contest-card__img img{width:100%;height:100%;object-fit:cover} .contest-card__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px} .contest-card__state{position:absolute;left:10px;top:10px;background:var(--surface);color:var(--ink);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px} .contest-card--open .contest-card__state{background:var(--c-ok-line);color:var(--on-accent)} .contest-card--closed,.contest-card--finished{opacity:.82} .contest-card__body{padding:12px 14px} .contest-card__title{font-size:17px;margin:0 0 6px} .contest-card__title a{color:var(--ink)} .contest-card__prize{margin:0 0 6px;font-size:14px;color:var(--ink-soft)} .contest-card__meta{margin:0;font-size:12.5px;color:var(--muted)} .contest__facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .contest__facts div{background:var(--line-soft);border-radius:var(--radius);padding:8px 12px;min-width:120px} .contest__facts span{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.3px} .contest__facts strong{font-size:14px} .contest__entry{margin-top:24px;padding:18px;border:2px solid var(--accent);border-radius:var(--radius);background:var(--c-blood-deep)} .contest__entry h2{margin-top:0;font-size:19px} .contest__results{margin-top:20px;padding:16px 18px;background:var(--c-ok-bg);border-left:4px solid var(--c-ok);border-radius:var(--radius)} .contest__results h2{margin-top:0} .contest__mine{margin:10px 0 0;padding:10px 14px;border-left:3px solid var(--line);color:var(--ink-soft)} /* ---------- PUNKTY, RANGI, SKLEPIK ---------- */ .user-box__pts{font-size:12.5px;font-weight:700;color:var(--accent-ink);border:1px solid var(--accent);border-radius:999px;padding:2px 9px;white-space:nowrap} .user-box__pts:hover{background:var(--accent);color:var(--on-accent);text-decoration:none} .rank-badge{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);vertical-align:middle} .rank-badge--2{background:var(--surface-2);color:var(--c-info)} .rank-badge--3{background:var(--c-ok-bg);color:var(--c-ok)} .rank-badge--4{background:var(--c-warn-bg);color:var(--ink-soft)} .rank-badge--5{background:var(--surface-2);color:var(--ink-soft)} .rank-badge--6{background:var(--surface-2);color:var(--c-warn)} .points-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px} .points-box > div{padding-right:18px;border-right:1px solid var(--line)} .points-box span{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.3px} .points-box strong{font-size:22px;color:var(--ink)} .points-box__bal strong{color:var(--accent-ink)} .points-box small{display:block;font-size:12px;color:var(--ink-soft)} .points-box p{margin:0} .points-rules{margin-bottom:16px} .points-rules h2{font-size:17px;margin:0 0 8px} .points-rules ul{margin:0;padding-left:18px;line-height:1.8} .points-hist{width:100%;border-collapse:collapse;font-size:14px} .points-hist td{padding:6px 4px;border-bottom:1px solid var(--line-soft)} .points-hist td:last-child{text-align:right;font-weight:700;white-space:nowrap} .pts-plus{color:var(--c-ok)}.pts-minus{color:var(--c-danger)} .reward-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .reward{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column} .reward.is-out{opacity:.55} .reward__img{aspect-ratio:4/3;background:var(--line-soft);display:flex;align-items:center;justify-content:center;font-size:48px} .reward__img img{width:100%;height:100%;object-fit:cover} .reward__body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1} .reward__body h3{margin:0 0 6px;font-size:16px} .reward__body p{margin:0 0 10px;font-size:13.5px;color:var(--ink-soft)} .reward__foot{display:flex;justify-content:space-between;align-items:center;margin:auto 0 10px} .reward__cost{font-size:18px;font-weight:800;color:var(--accent-ink)} .reward__stock{font-size:12px;color:var(--muted)} .reward__order summary{list-style:none;cursor:pointer;display:inline-block} .reward__order summary::-webkit-details-marker{display:none} .reward__order form{margin-top:10px} .ranking{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)} .ranking__row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft)} .ranking__row:last-child{border-bottom:0} .ranking__pos{width:28px;height:28px;border-radius:50%;background:var(--line-soft);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .ranking__row--top .ranking__pos{background:var(--accent);color:var(--on-accent)} .ranking__name{font-weight:700;color:var(--ink)} .ranking__pts{margin-left:auto;font-weight:700;color:var(--accent-ink)} @media (max-width:700px){.contest-grid,.reward-grid{grid-template-columns:1fr}.points-box > div{border-right:0}} /* ========================================================= CIEMNY MOTYW - poprawki elementów (jedyny motyw strony; tryb jasny usunięty) ========================================================= */ :root .article__content [style*="color"]{color:inherit!important} :root .article__content [style*="background"]{background:transparent!important} :root .article__content table th{background:var(--surface-2)} :root .article__content img,:root .card__thumb img{filter:brightness(.92)} :root input,:root textarea,:root select{background:var(--surface-2);color:var(--ink);border-color:var(--c-line-ui)} /* ---------- UDOSTĘPNIANIE ---------- */ .share{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line-soft)} .share__label{font-weight:700;font-size:13.5px;margin-right:4px} .share__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font:inherit;font-size:13px;cursor:pointer;text-decoration:none} .share__btn:hover{text-decoration:none;color:var(--on-accent);border-color:transparent} .share__btn--facebook:hover{background:var(--brand-facebook)}.share__btn--x:hover{background:var(--c-black)}.share__btn--wykop:hover{background:var(--brand-wykop)} .share__btn--reddit:hover{background:var(--brand-reddit)}.share__btn--linkedin:hover{background:var(--brand-linkedin)}.share__btn--whatsapp:hover{background:var(--brand-whatsapp)} .share__btn--email:hover,.share__btn--copy:hover,.share__btn--native:hover{background:var(--accent)} .article__updated{color:var(--accent-ink)} @media (max-width:640px){.share__btn span{display:none}.share__btn{padding:8px}.share__btn--copy span,.share__btn--native span{display:inline}} .panel__count{font-size:11.5px;color:var(--muted);white-space:nowrap} /* ===== Autorzy ===== */ .author-ava{border-radius:50%;object-fit:cover;flex:none;background:var(--surface-2)} .author-ava--ini{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);font-weight:800;border-radius:50%;flex:none} .author-box{display:flex;gap:16px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:22px 0} .author-box__label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)} .author-box__name{font-size:18px;font-weight:800;color:var(--ink)} .author-box__title{display:block;font-size:13px;color:var(--accent-ink);font-weight:600;margin-top:2px} .author-box p{margin:8px 0;font-size:14px;color:var(--ink-soft);line-height:1.55} .author-box__more{font-size:13px;font-weight:600} .author-head{display:flex;gap:22px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px} .author-head h1{margin:0 0 4px;font-size:26px} .author-head p{margin:6px 0;color:var(--ink-soft);line-height:1.6} .author-head__title{color:var(--accent-ink)!important;font-weight:700} @media (max-width:560px){.author-head,.author-box{flex-direction:column;align-items:center;text-align:center}} /* ===== Ocena tekstu ===== */ .vote{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:22px 0 0;background:var(--surface)} .vote__q{font-weight:700;color:var(--ink);margin-right:4px} .vote__btn{font:inherit;font-size:14px;padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer} .vote__btn:hover{border-color:var(--accent)} .vote__btn.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .vote__msg{font-size:13px;color:var(--c-ok);font-weight:600} .vote__sum{flex-basis:100%;color:var(--muted);font-size:12.5px} /* ===== Newsletter ===== */ .panel--newsletter .panel__body{padding:12px 14px} .nl-lead{margin:0 0 10px;font-size:13.5px;color:var(--ink-soft)} .nl-form{display:grid;grid-template-columns:1fr auto;gap:8px} .nl-form input[type=email]{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)} .nl-form__email{margin:0} .nl-form__consent{grid-column:1/-1;display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.4} .nl-form--side{grid-template-columns:1fr} .nl-page{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;max-width:640px} .nl-page h1{margin-top:0} .nl-page__lead{color:var(--ink-soft);line-height:1.6} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- Redakcja (/redakcja) ---------- */ .team-page{max-width:1100px} .team-hero{position:relative;overflow:hidden;border-radius:14px;padding:34px 34px 26px;margin-bottom:22px;color:var(--on-accent); background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent) 55%,transparent) 0%,color-mix(in srgb,var(--accent) 0%,transparent) 55%),linear-gradient(135deg,var(--surface-2) 0%,var(--surface-2) 60%,var(--c-blood-deep) 100%)} .team-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:28px 28px; -webkit-mask-image:linear-gradient(90deg,transparent 30%,var(--c-black));mask-image:linear-gradient(90deg,transparent 30%,var(--c-black))} .team-hero>*{position:relative;z-index:1} .team-hero__eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold-light);margin-bottom:8px} .team-hero h1{margin:0 0 10px;font-size:34px;line-height:1.15;letter-spacing:-.01em} .team-hero__lead{max-width:680px;margin:0 0 22px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.86)} .team-hero__stats{display:flex;flex-wrap:wrap;gap:10px;margin:0} .team-hero__stats div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 16px;min-width:120px;backdrop-filter:blur(4px)} .team-hero__stats dt{font-size:24px;font-weight:800;line-height:1.1} .team-hero__stats dd{margin:2px 0 0;font-size:12.5px;color:rgba(255,255,255,.72)} .team-h2{font-size:20px;margin:30px 0 14px;display:flex;align-items:center;gap:12px} .team-h2::after{content:"";flex:1;height:1px;background:var(--line)} .team-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px; box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .team-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.10);border-color:color-mix(in srgb,var(--accent) 35%,transparent)} .team-card__photo{display:block;align-self:flex-start;justify-self:start;width:fit-content;margin-bottom:14px;border-radius:50%;line-height:0; padding:3px;background:linear-gradient(135deg,var(--accent),var(--c-gold-light))} .team-card__photo .author-ava{border:3px solid var(--surface);display:block} .team-card__photo .author-ava--ini{display:flex} .team-card__body{display:flex;flex-direction:column;flex:1;min-width:0} .team-card__role{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)} .team-card__name{margin:3px 0 8px;font-size:20px;line-height:1.25} .team-card__name a{color:var(--ink);text-decoration:none} .team-card__name a:hover{color:var(--accent-ink)} .team-card__bio{margin:0 0 12px;color:var(--ink-soft);font-size:14.5px;line-height:1.6} .team-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 12px;padding:0} .team-chips li{font-size:12.5px;font-weight:600;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);padding:3px 10px} .team-chips a{color:inherit;text-decoration:none} .team-chips li:has(a):hover{border-color:var(--accent-ink);color:var(--accent-ink)} .team-card__stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);padding:10px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-bottom:12px} .team-card__stats b{color:var(--ink);font-weight:700} .team-card__label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .team-card__latest ul{list-style:none;margin:0 0 14px;padding:0} .team-card__latest li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4;padding:4px 0} .team-card__latest li svg{flex:none;margin-top:2px;color:var(--muted)} .team-card__latest a{color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .team-card__latest a:hover{color:var(--accent-ink)} .team-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto} .team-btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line); background:var(--surface);color:var(--ink);text-decoration:none;transition:background .15s,border-color .15s,color .15s;max-width:100%} .team-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .team-btn:hover{border-color:var(--accent-ink);color:var(--accent-ink)} .team-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .team-btn--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--on-accent)} .team-btn--light{background:var(--c-bone);border-color:var(--c-bone);color:var(--c-obsidian)} .team-btn--light:hover{background:var(--c-gold-light);border-color:var(--c-gold-light);color:var(--c-obsidian)} .team-card--lead{display:grid;grid-template-columns:auto 1fr;gap:8px 30px;padding:28px;border-top:4px solid var(--accent)} .team-card--lead .team-card__photo{margin:0} .team-card--lead .team-card__name{font-size:28px} .team-card--lead .team-card__bio{font-size:15.5px} .team-card--lead .team-card__latest ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .team-card--lead .team-card__latest li{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px} .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px} .team-grid--one{grid-template-columns:1fr} .team-card--wide{display:grid;grid-template-columns:auto 1fr;gap:6px 26px} .team-card--wide .team-card__photo{margin:0} .team-card--wide .team-card__latest ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .team-card--wide .team-card__latest li{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px} .team-principles ol{counter-reset:tp;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} .team-principles li{counter-increment:tp;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 16px 16px 56px;line-height:1.5;font-size:14.5px} .team-principles li::before{content:counter(tp);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-ink);font-weight:800;display:flex;align-items:center;justify-content:center} .team-cta{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin:30px 0 10px} .team-cta section{border-radius:14px;padding:24px} .team-cta h2{margin:0 0 8px;font-size:20px} .team-cta__join{color:var(--on-accent);background:linear-gradient(135deg,var(--accent) 0%,var(--c-blood-hover) 100%)} .team-cta__join p{margin:0 0 16px;line-height:1.6;color:rgba(255,255,255,.92)} .team-cta__contact{background:var(--surface);border:1px solid var(--line)} .team-cta__contact ul{list-style:none;margin:0;padding:0} .team-cta__contact li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14.5px;color:var(--ink-soft)} .team-cta__contact li svg{flex:none;margin-top:3px;color:var(--accent-ink)} :root .team-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.45)} @media (max-width:820px){ .team-card--lead,.team-card--wide{grid-template-columns:1fr;text-align:left} .team-card--lead .team-card__latest ul,.team-card--wide .team-card__latest ul{grid-template-columns:1fr} .team-cta{grid-template-columns:1fr} } @media (max-width:560px){ .team-hero{padding:24px 18px 18px;border-radius:12px} .team-hero h1{font-size:26px} .team-hero__stats div{flex:1 1 calc(50% - 10px);min-width:0} .team-card,.team-card--lead{padding:18px} .team-card--lead .team-card__photo .author-ava{width:112px!important;height:112px!important} .team-card--lead .team-card__name{font-size:23px} .team-grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){.team-card{transition:none}.team-card:hover{transform:none}} /* ===================================================================== v8: nagłówek, menu z podmenu, wysuwane menu na telefonie, stopka ===================================================================== */ :root{--viz-a:var(--c-gold-light);--viz-b:var(--c-info);--good:var(--c-ok);--warn:var(--c-warn);--good-bg:var(--c-ok-bg);--warn-bg:var(--c-warn-bg)} .hdr-mob,.drawer-head,.drawer-search,.drawer-account,.drawer-foot{display:none} .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--ink-soft);border:1px solid var(--line)} .bell:hover{color:var(--accent-ink);border-color:var(--accent);text-decoration:none} .bell__n{position:absolute;top:-5px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800;line-height:18px;text-align:center} .bell__n--inline{position:static;display:inline-block;margin-left:6px} /* menu górne - komputer */ .main-nav__list > li{position:relative} .mnav-group > summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;color:var(--ink);padding:0 var(--s-2);font-family:var(--font-head);font-size:var(--fs-lg);user-select:none} .mnav-group > summary::-webkit-details-marker{display:none} .mnav-group > summary:hover,.mnav-group[open] > summary{background:rgba(255,255,255,.08);color:var(--on-accent)} .mnav-group > summary:focus-visible,.main-nav__list a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .mnav-chev{transition:transform .15s ease;opacity:.75} .mnav-group[open] .mnav-chev{transform:rotate(180deg)} .mnav-group > summary.is-current,.main-nav__list a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold);color:var(--accent-ink)} .mnav-sub{list-style:none;margin:0;padding:8px;position:absolute;left:0;top:100%;z-index:60;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.18)} .main-nav .mnav-sub a{display:block;color:var(--ink);padding:9px 12px;border-radius:7px;font-size:14px;font-weight:600} .main-nav .mnav-sub a:hover{background:var(--surface-2);color:var(--accent-ink);text-decoration:none} .main-nav .mnav-sub a[aria-current="page"]{color:var(--accent-ink);box-shadow:none;background:var(--surface-2)} /* telefon i tablet (3.7, plansza mobile 13–15): logo + lupa + przycisk menu; menu jako panel na cały ekran. Bez JavaScriptu (brak klasy .js) menu jest zwykłą listą pod nagłówkiem. */ @media (max-width:900px){ .hdr-desk,.site-header .hdr-search{display:none!important} .hdr-strip{display:none} /* plansza mobile: bez paska nad nagłówkiem */ .hdr-actions{border-left:0;padding-left:0} .site-header__inner{flex-wrap:wrap;gap:var(--s-1);padding-top:10px;padding-bottom:10px} .site-header .user-box{margin-left:auto;gap:2px;order:2} .logo{order:1} .hdr-mob{display:inline-flex} .hdr-burger{display:none;align-items:center;gap:var(--s-1);min-height:44px;min-width:44px;padding:0 6px;background:none;border:0;color:var(--ink); font-family:var(--font-head);font-size:var(--fs-lg);cursor:pointer} .js .hdr-burger{display:inline-flex} .hdr-burger:hover{color:var(--accent-ink)} .hdr-burger__lines{display:inline-flex;flex-direction:column;gap:6px;width:26px} .hdr-burger__lines i{display:block;height:1.5px;background:currentColor} .bell{width:44px;height:44px} /* bez JavaScriptu: zwykła lista pod nagłówkiem (każda pozycja ≥ 48 px) */ .main-nav{order:3;flex-basis:100%;margin:0} .main-nav__inner{display:block;align-items:stretch} .main-nav .main-nav__list{flex-direction:column} .main-nav .main-nav__list > li > a,.mnav-group > summary{min-height:48px;border-top:1px solid var(--c-line)} .drawer-account{display:flex;flex-wrap:wrap;gap:var(--s-1);padding:var(--s-1) 0} .mnav-sub{position:static;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 12px;min-width:0;background:transparent} .main-nav .mnav-sub a{min-height:44px;display:flex;align-items:center;font-size:var(--fs-base);color:var(--ink-soft)} /* z JavaScriptem: panel na cały ekran (logo i „Zamknij”, szukanie, duże pozycje ze strzałką, konto, stopka) */ .js .main-nav{position:fixed;inset:0;z-index:1000;overflow-y:auto;overscroll-behavior:contain; background:linear-gradient(to bottom,var(--bg) 40%,color-mix(in srgb,var(--bg) 55%,transparent) 72%,var(--bg) 100%), url("assets/img/ilustracje/hero-460.webp") center bottom/cover no-repeat,var(--bg); visibility:hidden;opacity:0;transition:opacity .18s ease,visibility 0s linear .18s} html.nav-open .main-nav{visibility:visible;opacity:1;transition:opacity .18s ease} html.nav-open{overflow:hidden} html.nav-open .site-header{z-index:1300} /* panel jest w nagłówku - przy otwartym menu nad treścią i banerem cookies (1200) */ .js .main-nav__inner{display:flex;flex-direction:column;align-items:stretch;min-height:100%;padding:10px var(--gutter) var(--s-3)} .js .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)} .drawer-head__logo{line-height:0} .drawer-head__logo img{height:56px;width:auto} .drawer-head__close{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;background:none;border:0;color:var(--ink);cursor:pointer} .drawer-head__close:hover{color:var(--accent-ink)} .js .drawer-search{display:block;margin:var(--s-2) 0 var(--s-1)} .drawer-search .field-dc{min-height:52px;font-size:var(--fs-lg)} .js .main-nav .main-nav__list > li > a,.js .mnav-group > summary{justify-content:space-between;min-height:68px;padding:0 4px;border-top:0; border-bottom:1px solid color-mix(in srgb,var(--gold) 70%,transparent);font-size:clamp(1.625rem,7.5vw,2.125rem);font-weight:600;color:var(--ink)} .js .main-nav .main-nav__list > li > a::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:rotate(45deg)} .js .main-nav .main-nav__list > li > a:hover,.js .mnav-group > summary:hover{color:var(--accent-ink);background:none} .js .mnav-group > summary.is-current,.js .main-nav__list a[aria-current="page"]{box-shadow:none;color:var(--accent-ink)} .js .drawer-account{gap:var(--s-1);margin-top:var(--s-3)} .drawer-account a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)} .drawer-account .btn{flex:1 1 140px} .drawer-account__who{flex-direction:column;align-items:flex-start!important} .drawer-account__who span{font-size:13px;color:var(--muted)} .js .drawer-foot{display:block;margin-top:auto;padding-top:var(--s-5);text-align:center;font-size:13px;color:var(--ink-soft)} .drawer-foot ul{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:0 0 var(--s-1);padding:0} .drawer-foot li + li{border-left:1px solid var(--gold)} .drawer-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-2);color:var(--ink)} .drawer-foot p{margin:0} .drawer-foot .drawer-caption{margin-top:var(--s-1);font-size:11px;font-style:italic} /* podpis tła menu (5.3, KONSPEKT zasada 4) */ } @media (max-width:900px) and (prefers-reduced-motion:reduce){.js .main-nav,html.nav-open .main-nav{transition:none}} @media (max-width:420px){ .logo__img{height:44px} .hdr-burger__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* napis tylko dla czytnika */ } /* wspólne: nagłówek narzędzi */ .tool-hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:18px;position:relative;overflow:hidden} .tool-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent),var(--c-gold-light))} .tool-hero__eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px} .tool-hero h1{margin:0 0 8px;font-size:28px;line-height:1.2} .tool-hero p{margin:0 0 12px;color:var(--ink-soft);line-height:1.6;max-width:720px} .tool-hero__actions{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px} .tool-hero__hint{font-size:13px!important;color:var(--muted)!important} .tool-hero__search{width:100%;max-width:420px;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:16px;background:var(--surface-2);color:var(--ink)} .follow-form{display:inline-flex;margin:0} .follow-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13.5px;font-weight:700;color:var(--accent-ink);background:var(--surface);border:1px solid var(--accent);border-radius:999px;padding:6px 13px;cursor:pointer;line-height:1.2;white-space:nowrap} .follow-btn:hover{background:var(--accent);color:var(--on-accent);text-decoration:none} .follow-btn.is-on{background:var(--accent);color:var(--on-accent)} .follow-btn.is-on:hover{background:var(--accent-dark)} .section-head .follow-form,.section-head > .follow-btn{margin-left:12px} .article__follow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink-soft)} .article__follow > span{font-weight:600;margin-right:4px} /* W skrócie, cykl, odsłuch */ .tldr{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface-2);border-radius:8px;padding:14px 18px;margin:16px 0} .tldr__title{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)} .tldr ul{margin:0;padding-left:20px} .tldr li{margin:4px 0;line-height:1.55;font-weight:500} .series-box{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:16px 0;background:var(--surface)} .series-box__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px} .series-box__label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .series-box__name{font-weight:800;color:var(--ink)} .series-box__pos{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;padding:2px 10px} .series-box__list summary{cursor:pointer;font-size:13.5px;color:var(--link);margin:8px 0 4px} .series-box__list ol{margin:6px 0 0;padding-left:22px} .series-box__list li{margin:4px 0;font-size:14.5px} .series-box__list li.is-current{font-weight:700} .series-box__nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .series-box__btn{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--ink);font-weight:600;font-size:14px;line-height:1.35} .series-box__btn small{color:var(--accent-ink);font-weight:700;font-size:12px} .series-box__btn:hover{border-color:var(--accent);text-decoration:none} .series-box__btn--next{text-align:right;grid-column:2} .series-head{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px} .series-head__label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)} .series-head h1{margin:6px 0 8px} .series-list{list-style:none;margin:0;padding:0} .series-list > li{display:flex;gap:12px;align-items:flex-start} .series-list__no{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:16px} .series-list .news-list{flex:1;min-width:0} .article__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px} .listen{display:inline-flex;align-items:center;gap:6px} .listen__btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer} .listen__btn small{color:var(--muted);font-weight:500} .listen__btn:hover{border-color:var(--accent)} .listen__ico-pause{display:none} .listen.is-playing .listen__ico-play{display:none} .listen.is-playing .listen__ico-pause{display:inline} .listen.is-playing .listen__btn{border-color:var(--accent-ink);color:var(--accent-ink)} .listen__stop{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer} .listen__rate{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:4px} .listen__rate select{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);padding:3px 4px} .is-reading{background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:4px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)} /* relacja na żywo */ .live-jump{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:6px 13px} .live-jump.is-on{color:var(--on-accent);background:var(--c-live);border-color:var(--c-live)} .live-jump.is-on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-white);animation:livepulse 1.4s infinite} @keyframes livepulse{50%{opacity:.25}} .live-pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--on-accent);background:var(--c-live);border-radius:4px;padding:2px 7px;margin-right:6px} .live{margin:22px 0;border-top:3px solid var(--c-live);padding-top:12px} .live__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px} .live__badge{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:4px 9px;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)} .live__badge.is-on{background:var(--c-live);color:var(--on-accent);border-color:var(--c-live)} .live__meta{font-size:13.5px;color:var(--muted)} .live__new{display:block;width:100%;margin:0 0 12px;padding:11px;border:0;border-radius:8px;background:var(--c-live);color:var(--on-accent);font:inherit;font-weight:700;cursor:pointer} .live-entry{position:relative;padding:12px 0 14px 22px;border-left:2px solid var(--line);margin-left:6px} .live-entry::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--muted)} .live-entry--key::before{background:var(--c-live);border-color:var(--c-live)} .live-entry--pinned{background:var(--surface-2);border-radius:0 8px 8px 0;border-left-color:var(--accent)} .live-entry__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:4px} .live-entry__head time{font-weight:800;font-size:16px;color:var(--ink)} .live-entry__flag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--c-live)} .live-entry__date,.live-entry__author{font-size:12.5px;color:var(--muted)} .live-entry__body p{margin:0 0 8px;line-height:1.65} .live-entry__body img{max-width:100%;height:auto;border-radius:8px} .live-entry.is-new{animation:livein .8s ease} @keyframes livein{from{background:color-mix(in srgb,var(--c-live) 12%,transparent)}to{background:transparent}} /* powiadomienia */ .notif-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden} .notif{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line-soft)} .notif:last-child{border-bottom:0} .notif.is-new{background:color-mix(in srgb,var(--accent) 6%,transparent)} .notif__ico{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-soft)} .notif.is-new .notif__ico{background:var(--accent);color:var(--on-accent)} .notif a{color:var(--ink);font-weight:600;line-height:1.4} .notif time{display:block;font-size:12.5px;color:var(--muted);margin-top:2px} .grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:760px){.grid-2col{grid-template-columns:1fr}} .follow-list{list-style:none;margin:0;padding:0} .follow-list li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-soft)} .follow-list__kind{font-size:11.5px;font-weight:700;text-transform:uppercase;color:var(--muted);min-width:70px} .follow-list form{margin-left:auto} .link-btn{background:0;border:0;padding:4px;color:var(--link);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline} /* słowniczek */ a.gl{color:inherit;text-decoration:underline dotted var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;cursor:help} a.gl:hover{color:var(--accent-ink)} .gl-tip{position:absolute;z-index:200;max-width:320px;background:var(--surface-2);color:var(--ink);border:1px solid var(--c-line-ui);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5;box-shadow:0 12px 30px rgba(0,0,0,.25)} .gl-tip b{display:block;margin-bottom:2px;color:var(--c-gold-light)} .gl-tip a{color:var(--c-gold-light);font-weight:700;font-size:13px} .gl-letters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px} .gl-letters a{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-weight:800;color:var(--ink)} .gl-letters a:hover{border-color:var(--accent-ink);color:var(--accent-ink);text-decoration:none} .gl-letter h2{font-size:22px;color:var(--accent-ink);margin:18px 0 8px} .gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .gl-card{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink)} .gl-card strong{font-size:16px} .gl-card span{font-size:13.5px;color:var(--ink-soft);line-height:1.45} .gl-card:hover{border-color:var(--accent);text-decoration:none} .gl-entry{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:18px} .gl-entry__eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)} .gl-entry h1{margin:4px 0 4px;font-size:32px} .gl-entry__aka{margin:0 0 12px;color:var(--muted);font-size:14px} .gl-entry__short{font-size:18px;line-height:1.6;font-weight:500;margin:0 0 14px} .gl-entry__body p{line-height:1.7;color:var(--ink-soft)} .gl-source{font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:10px;margin:14px 0 0} /* kalendarz premier */ .launch-group{margin:0 0 22px} .launch-group__title{font-size:19px;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid var(--accent);display:inline-block} .launch{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;scroll-margin-top:80px} .launch:target{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)} .launch--past{opacity:.82} .launch__date{flex:none;width:64px;min-height:64px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.1} .launch__date b{font-size:26px;font-weight:800} .launch__date span{font-size:12px;font-weight:700;text-transform:uppercase} .launch__date--fuzzy{background:var(--surface-2);color:var(--ink);border:1px dashed var(--line)} .launch__date--fuzzy span{font-size:11.5px;text-transform:none;padding:4px} .launch__body{flex:1;min-width:0} .launch__meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px} .launch__status{font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 7px} .launch__status--confirmed{background:var(--good-bg);color:var(--good)} .launch__status--expected{background:color-mix(in srgb,var(--c-info) 12%,transparent);color:var(--c-info)} .launch__status--rumor{background:var(--warn-bg);color:var(--warn)} .launch__topic{color:var(--muted);font-weight:600} .launch__count{font-weight:800;color:var(--accent-ink)} .launch__title{margin:5px 0 4px;font-size:18px} .launch__desc{margin:0 0 6px;color:var(--ink-soft);font-size:14.5px;line-height:1.55} .launch__price{margin:0 0 6px;font-size:14px} .launch__actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px} .launch__btn{display:inline-flex;align-items:center;font:inherit;font-size:13px;font-weight:700;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer} .launch__btn:hover{border-color:var(--accent-ink);color:var(--accent-ink);text-decoration:none} .launch__btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .launch__btn--primary:hover{color:var(--on-accent);background:var(--accent-dark)} .launch__btn--remind.is-on{background:var(--good-bg);border-color:var(--good);color:var(--good)} .launch__src{font-size:12.5px;color:var(--muted)} .side-launches{list-style:none;margin:0;padding:0} .side-launches a{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)} .side-launches a:hover{text-decoration:none;color:var(--accent-ink)} .side-launches__date{flex:none;width:44px;height:44px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:700;text-transform:uppercase;line-height:1.1} .side-launches__date b{font-size:17px} .side-launches__body{display:flex;flex-direction:column;min-width:0} .side-launches__body strong{font-size:14px;line-height:1.3} .side-launches__body small{color:var(--muted);font-size:12.5px} .side-more{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:600} @media (max-width:520px){.launch{padding:12px;gap:10px}.launch__date{width:54px;min-height:54px}.launch__date b{font-size:22px}} .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;background:var(--ink);color:var(--surface);padding:12px 18px;border-radius:10px;font-size:14.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:min(92vw,440px);text-align:center;transition:opacity .5s ease} .toast.is-out{opacity:0} .main-nav .mnav-sub li a,.main-nav .mnav-sub li:first-child a{color:var(--ink)} .main-nav .mnav-sub li a[aria-current="page"]{color:var(--accent-ink)} @media (max-width:900px){.main-nav .mnav-sub li a,.main-nav .mnav-sub li:first-child a{color:var(--ink-soft)}} .live-pill{width:fit-content;align-self:flex-start} .listen [hidden],.live [hidden]{display:none!important} .typefilter{flex-wrap:wrap} @media (max-width:760px){.typefilter__item{flex:1 1 auto;min-width:0}} .gl-tip__src{display:block;font-size:11.5px;opacity:.75;margin:4px 0} /* ---------- Osadzenia (X, YouTube, Instagram, TikTok) - wczytywane po kliknięciu ---------- */ .kp-embedbox{position:relative;margin:1.4em auto;max-width:560px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);overflow:hidden} .kp-embedbox--youtube{max-width:100%;aspect-ratio:16/9;background:var(--c-black);color:var(--on-accent);border-color:var(--c-black);display:flex;align-items:center;justify-content:center} .kp-embedbox__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;margin:0!important;border-radius:0!important} .kp-embedbox__body{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 18px;text-align:center} .kp-embedbox__ico{font-size:30px;line-height:1;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent)} .kp-embedbox--x .kp-embedbox__ico{background:var(--c-black)} .kp-embedbox__title{font-size:16px} .kp-embedbox__note{font-size:12.5px;color:var(--muted);max-width:420px} .kp-embedbox--youtube .kp-embedbox__note{color:var(--ink-soft)} .kp-embedbox--youtube .kp-embedbox__note a{color:var(--on-accent)} .kp-embedbox.is-live{background:none;border:0;aspect-ratio:auto;display:block;max-width:560px} .kp-embedbox.is-live.kp-embedbox--youtube{max-width:100%} .kp-embedbox__live .twitter-tweet{margin:0 auto!important} .kp-embedbox__frame{display:block;width:100%;border:0;border-radius:var(--radius);background:var(--c-black)} .kp-embedbox__frame--video{aspect-ratio:16/9} .kp-embedbox__frame--ig{height:640px;background:var(--c-white)} .kp-embedbox__frame--tt{height:740px;max-width:340px;margin:0 auto;background:var(--c-white)} .kp-embedbox--facebook .kp-embedbox__ico{background:var(--brand-facebook);font-weight:800;font-family:Arial,sans-serif} .kp-embedbox__frame--fb{height:620px;max-width:500px;margin:0 auto;background:var(--c-white)} .kp-embedbox__frame--fbv{aspect-ratio:16/9;max-width:560px;margin:0 auto} /* ---------- v11: zdjęcia z podpisem, ramki, tabele ---------- */ .article__content .kp-figure,.page-content .kp-figure{margin:1.3em 0;text-align:center} .kp-figure img{display:block;margin:0 auto!important;max-width:100%;height:auto} .kp-figure figcaption{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45} .kp-credit{font-style:italic;white-space:nowrap} .kp-box{margin:1.3em 0;padding:14px 18px;border-radius:var(--radius);border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface-2)} .kp-box>:last-child{margin-bottom:0} .kp-box__title{font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.04em;margin:0 0 .4em!important} .kp-box--info{border-left-color:var(--c-info)}.kp-box--info .kp-box__title{color:var(--c-info)} .kp-box--warn{border-left-color:var(--c-warn);background:var(--c-warn-bg)}.kp-box--warn .kp-box__title{color:var(--c-warn)} .kp-box--tip{border-left-color:var(--c-ok);background:var(--c-ok-bg)}.kp-box--tip .kp-box__title{color:var(--c-ok)} .kp-box--spec{border-left-color:var(--ink-soft)}.kp-box--spec .kp-box__title{color:var(--ink-soft)} .kp-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1em 0;max-width:100%} .kp-table table{margin:0!important;min-width:480px} .kp-table thead th{white-space:nowrap} .article__source a{color:var(--link)} /* ---------- v15: ranking przecieków ---------- */ .leak-rank h2,.leak-list h2,.leak-few h2,.leak-method h2{font-size:20px;margin:26px 0 12px} .leak-src{display:grid;grid-template-columns:44px 1fr 130px;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px} .leak-src__pos{font-size:22px;font-weight:800;color:var(--muted);text-align:center} .leak-src h3{margin:0;font-size:17px} .leak-src__x{font-size:13px;font-weight:600;color:var(--link)} .leak-src__desc{margin:2px 0 6px;font-size:13px;color:var(--ink-soft)} .leak-src__meta{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft)} .leak-src__acc{text-align:center} .leak-src__acc b{display:block;font-size:30px;line-height:1;color:var(--accent-ink)} .leak-src__acc small{display:block;font-size:11.5px;color:var(--muted);margin-top:4px} .leak-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line-soft);gap:2px} .leak-bar .is-hit{background:var(--c-ok-line)}.leak-bar .is-part{background:var(--c-warn)}.leak-bar .is-miss{background:var(--c-danger-line)} .leak-few p{font-size:14px;color:var(--ink-soft)} .leak-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px;font-size:14px} .leak-item__head{margin-bottom:6px} .leak-v{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--line-soft);color:var(--ink-soft);margin-right:4px} .leak-v--hit{background:var(--c-ok-bg);color:var(--c-ok)}.leak-v--partial{background:var(--c-warn-bg);color:var(--c-warn)}.leak-v--miss{background:var(--c-danger-bg);color:var(--c-danger)} .leak-claims{margin:0;padding:0;list-style:none;font-size:13.5px} .leak-claims li{padding:2px 0 2px 20px;position:relative} .leak-claims li::before{content:"•";position:absolute;left:6px;color:var(--muted)} .leak-claims li.is-hit::before{content:"\2713";color:var(--c-ok);left:3px;font-weight:800} .leak-claims li.is-miss::before{content:"\2715";color:var(--c-danger);left:3px;font-weight:800} .leak-claims span{color:var(--muted)} .leak-claims small{color:var(--ink-soft)} .leak-method ul{font-size:14px;color:var(--ink-soft);padding-left:18px} .leak-box{margin:1.4em 0;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--c-warn);border-radius:var(--radius);background:var(--surface-2);font-size:14px} .leak-box p{margin:0} .leak-box__title{font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px!important} .launch__leak{font-size:12px;color:var(--ink-soft)} @media (max-width:640px){.leak-src{grid-template-columns:32px 1fr}.leak-src__acc{grid-column:2;text-align:left}.leak-src__acc b{display:inline;font-size:22px;margin-right:6px}.leak-src__acc small{display:inline}} /* ===================== v15.3: miniatury - logo i grafiki w całości ===================== */ /* klasa kp-fit: obraz z jednolitym tłem (logo, grafika, produkt na białym) - bez przycinania, tło w kolorze brzegów */ img.kp-fit{object-fit:contain!important;object-position:50% 50%!important;background-color:var(--kp-fit-bg,var(--on-accent))} .slide img.kp-fit{opacity:1;padding:2% 4% 17%} /* logo nad podpisem slajdu */ @media (max-width:640px){.slide img.kp-fit{padding:3% 6% 36%;object-position:50% 0!important}} @media (min-width:641px){.news-item__thumb{align-self:flex-start}} /* miniatura bez szarego pasa pod spodem, gdy tytuł ma 3 linie */ /* ---------- GRY: katalog /gry/ i karta gry /gry/{slug}/ (zadanie 2.2) ---------- */ /* etykieta statusu zawsze tekstem (KOMPENDIUM / NADCHODZI), kolor tylko pomocniczo */ .game-status{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; padding:2px 8px;border:1px solid currentColor;border-radius:3px;margin-bottom:6px;color:var(--c-gold-light)} .game-status--nadchodzi{color:var(--c-danger)} .game-figure{margin:0;position:relative} .game-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .game-figure__caption{font-size:12px;color:var(--ink-soft);padding:4px 8px;background:var(--surface-2);border-top:1px solid var(--line)} .game-grid{align-items:start} .game-card__more{margin-top:auto;font-size:13px;font-weight:600} .game-head{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px} .game-head__text{padding:14px 16px} .game-head__title{font-size:26px;margin:0 0 6px} .game-head__lead{color:var(--ink-soft);margin:0 0 8px} .game-head__release{margin:0 0 6px} .game-section{margin:0 0 22px} .game-section__title{font-size:19px;margin:0 0 10px} .game-text p{margin:0 0 10px} .game-releases{list-style:none;margin:0;padding:0;display:grid;gap:10px} .game-release{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px} .game-release__kind{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft)} .game-release__name{font-size:16px;margin:2px 0 4px} .game-release__date{font-size:13px;color:var(--ink-soft);margin:0 0 6px} .game-release__desc{margin:0 0 6px;font-size:14px} .game-release__src{font-size:13px} .game-back{margin-top:10px} .game-back a{display:inline-flex;align-items:center;min-height:44px} /* pole dotyku ≥ 44 px (3.22) */ /* ---------- CENTRUM DIABLO V i bloki karty gry (zadanie 2.3) ---------- */ .game-head--hub{position:relative} .game-head__eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--c-gold-light);margin:0 0 4px} .game-head__cta{display:inline-block;margin-top:4px} /* pasek statusu gry: etykiety zawsze tekstem */ .hub-bar{background:var(--surface);border:1px solid var(--c-line-ui);border-radius:var(--radius);padding:10px 14px;margin:0 0 16px; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px} .hub-bar__list{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0} .hub-bar__item dt{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)} .hub-bar__item dd{margin:0;font-weight:700;color:var(--ink)} .hub-bar__more{font-size:13px;font-weight:600} /* zakładki: aktywna z obramowaniem i pogrubionym tekstem (nie tylko kolorem) */ .hub-tabs{margin:0 0 18px} .hub-tabs__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .hub-tabs__link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);background:var(--surface)} .hub-tabs__link:hover{text-decoration:none;border-color:var(--c-gold-light)} .hub-tabs__link.is-active{background:var(--accent);border:2px solid var(--c-gold-light);font-weight:700} .hub-tabs__link:focus-visible{outline:2px solid var(--c-gold-light);outline-offset:2px} /* status informacji */ .info-status{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;padding:1px 7px;border:1px solid currentColor;border-radius:3px;margin:0 0 4px} .info-status--official{color:var(--c-ok)} .info-status--analysis{color:var(--c-warn)} .info-status--speculation{color:var(--c-danger)} .game-facts-wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start;margin:0 0 22px} .game-facts-wrap .game-section{margin:0} .fact-list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .fact{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .fact:not(:has(.game-figure)){grid-template-columns:1fr} .fact__body{padding:10px 12px 10px 0} .fact:not(:has(.game-figure)) .fact__body{padding-left:12px} .fact__title{font-size:16px;margin:0 0 4px} .fact__desc{margin:0 0 6px;font-size:14px;color:var(--ink-soft)} .game-source{font-size:12.5px;color:var(--ink-soft);margin:0} .info-legend{background:var(--surface);border:1px solid var(--c-line-ui);border-radius:var(--radius);padding:12px 14px} .info-legend__title{font-size:17px;margin:0 0 8px} .info-legend__list{margin:0;display:grid;gap:10px} .info-legend__item dd{margin:2px 0 0;font-size:13px;color:var(--ink-soft)} .class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .class-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .class-card .game-figure img{aspect-ratio:4/3} .class-card__body{padding:10px 12px} .class-card__name{font-size:17px;margin:0 0 4px} .class-card__desc{margin:0;font-size:13.5px;color:var(--ink-soft)} .game-two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start} .timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--c-line-ui)} .timeline__item{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:0 0 14px} .timeline__item::before{content:"";position:absolute;left:-25px;top:4px;width:10px;height:10px;border:2px solid var(--c-gold-light);border-radius:50%;background:var(--bg)} .timeline__item--highlight::before{background:var(--c-gold-light)} .timeline__label{font-weight:700;color:var(--c-gold-light)} .timeline__title{font-size:15px;margin:0 0 2px} .timeline__desc{margin:0;font-size:13.5px;color:var(--ink-soft)} .faq{display:grid;gap:6px} .faq__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)} .faq__q{cursor:pointer;padding:10px 14px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;list-style:none} .faq__q::-webkit-details-marker{display:none} .faq__q::after{content:"+";font-size:20px;line-height:1;color:var(--c-gold-light);flex:none} .faq__item[open] .faq__q::after{content:"\2212"} .faq__q:focus-visible{outline:2px solid var(--c-gold-light);outline-offset:-2px} .faq__a{padding:0 14px 8px;color:var(--ink-soft)} .faq__a p{margin:0 0 8px} @media (max-width:760px){ .game-facts-wrap,.game-two-col{grid-template-columns:1fr} .class-grid{grid-template-columns:1fr 1fr} .fact{grid-template-columns:1fr} .fact__body{padding:0 12px 10px} .timeline__item{grid-template-columns:1fr;gap:2px} } @media (max-width:420px){ .class-grid{grid-template-columns:1fr} } /* ---------- STATUS INFORMACJI przy wpisach (zadanie 2.4): etykieta gry i statusu tekstem ---------- */ .post-labels{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 4px} .post-labels .info-status{margin:0} .post-game{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;padding:1px 7px;border-radius:3px;background:var(--accent);color:var(--on-accent)} .article__header .info-status{margin-left:6px;vertical-align:middle} .info-legend--inline{margin:18px 0} .info-legend--inline .info-legend__title{font-size:16px;font-weight:700;margin:0 0 8px} /* ---------- PORADNIKI /poradniki/ (zadanie 2.5, plansza 06) ---------- */ .guides-head{margin:0 0 14px} .guides-head__title{font-size:26px;margin:0 0 4px} .guides-head__lead{margin:0;color:var(--ink-soft)} .guides-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;background:var(--surface);border:1px solid var(--c-line-ui);border-radius:var(--radius);padding:12px 14px;margin:0 0 12px} .guides-filters__field{display:flex;flex-direction:column;gap:4px;min-width:170px;flex:1 1 170px} .guides-filters__field label{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft)} .guides-filters__field select{min-height:44px;padding:0 10px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font:inherit} .guides-filters__field select:disabled{opacity:.6} .guides-filters__hint{font-size:12px;color:var(--ink-soft)} .guides-filters__go{min-height:44px} .guides-filters__reset{display:inline-flex;align-items:center;min-height:44px;font-weight:600} .guides-count{font-size:13px;color:var(--ink-soft);margin:0 0 10px} .guide-list{display:grid;gap:12px} .guide-card{display:grid;grid-template-columns:240px minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .guide-card__thumb img{width:100%;height:100%;min-height:150px;object-fit:cover;display:block} .guide-card__body{padding:12px 14px;display:flex;flex-direction:column} .guide-card__title{font-size:19px;margin:2px 0 6px} .guide-card__title a{color:var(--ink)} .guide-card__lead{margin:0 0 8px;font-size:14px;color:var(--ink-soft)} .guide-card__meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted);margin:0 0 8px} .guide-card__more{margin-top:auto;font-weight:700;letter-spacing:.3px} .guides-hub{margin:20px 0 0;padding:16px 18px;border:1px solid var(--c-line-ui);border-radius:var(--radius);background:linear-gradient(90deg,var(--c-blood-deep),var(--surface))} .guides-hub__title{font-size:22px;font-weight:700;margin:0 0 2px} .guides-hub__text{margin:0 0 8px;color:var(--ink-soft)} .guides-hub__more{font-weight:700} .article__classes{display:inline-block;margin-left:8px;font-size:13px;color:var(--ink-soft)} @media (max-width:640px){ .guide-card{grid-template-columns:1fr} .guide-card__thumb img{aspect-ratio:16/9;min-height:0} } /* ---------- UNIWERSUM /uniwersum/ (zadanie 2.6, plansza 07) ---------- */ .lore-head{margin:0 0 14px} .lore-head__title{font-size:26px;margin:0 0 4px} .lore-head__lead{margin:0;color:var(--ink-soft)} .lore-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .lore-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column} .lore-section__body{padding:12px 14px} .lore-section__title{font-size:20px;margin:0 0 6px} .lore-section__title a{color:var(--ink)} .lore-section__desc{margin:0 0 8px;font-size:14px;color:var(--ink-soft)} .lore-section__count{margin:0;font-size:12.5px;color:var(--muted)} .lore-other{margin:14px 0 0;font-size:14px;color:var(--ink-soft)} .lore-chronicle{margin:20px 0 0;padding:16px 18px;border:1px solid var(--c-line-ui);border-radius:var(--radius);background:linear-gradient(90deg,var(--c-blood-deep),var(--surface))} .lore-chronicle__title{font-size:20px;font-weight:700;margin:0 0 4px} .lore-chronicle__text{margin:0 0 8px;color:var(--ink-soft)} .lore-chronicle__more{font-weight:700} .lore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start} .lore-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .lore-card__body{padding:10px 12px} .lore-card__title{font-size:16px;margin:0 0 4px} .lore-card__title a{color:var(--ink)} .lore-card__short{margin:0;font-size:13.5px;color:var(--ink-soft)} .lore-spoiler-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:1px 7px;border:1px solid var(--c-danger);color:var(--c-danger);border-radius:3px;margin:0 0 4px} .lore-spoiler-note{font-size:14px;color:var(--ink-soft)} .lore-entry .game-figure{margin:10px 0 12px} @media (max-width:760px){ .lore-grid{grid-template-columns:1fr 1fr} } @media (max-width:480px){ .lore-sections,.lore-grid{grid-template-columns:1fr} } /* ---------- SPOILERY (zadanie 2.7): fragment ukryty do kliknięcia, działa bez JS (pole wyboru + etykieta) ---------- */ .spoiler{position:relative} .spoiler__toggle{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .spoiler__btn{display:inline-flex;align-items:center;min-height:44px;padding:2px 10px;margin:2px 0;border:1px dashed var(--c-danger);border-radius:3px; background:var(--c-blood-deep);color:var(--ink);font-size:.9em;font-weight:600;cursor:pointer;vertical-align:baseline} .spoiler__btn::before{content:"\26A0";margin-right:6px;font-weight:400} .spoiler__toggle:focus-visible + .spoiler__btn{outline:2px solid var(--c-gold-light);outline-offset:2px} .spoiler__text,.spoiler__hide{display:none} .spoiler__toggle:checked + .spoiler__btn .spoiler__show{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* nazwa dla czytnika zostaje */ .spoiler__toggle:checked + .spoiler__btn .spoiler__hide{display:inline} .spoiler__toggle:checked ~ .spoiler__text{display:inline;background:color-mix(in srgb,var(--c-danger) 8%,transparent);border-bottom:1px dashed var(--c-danger)} .spoiler--block .spoiler__btn{min-height:44px} .spoiler--block > .spoiler__toggle:checked ~ .spoiler__text{display:block;border-bottom:0;padding:8px 0} /* „Ukryj spoilery: WYŁĄCZONE” - wszystko odkryte, bez przycisków */ html.kp-spoilers-off .spoiler__btn,html.kp-spoilers-off .spoiler__toggle{display:none} /* bez pustych przystanków Tab */ html.kp-spoilers-off .spoiler__text{display:inline;background:color-mix(in srgb,var(--c-danger) 8%,transparent)} html.kp-spoilers-off .spoiler--block > .spoiler__text{display:block;background:none} .spoiler-switch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 14px;padding:8px 12px;border:1px solid var(--c-line-ui);border-radius:var(--radius);background:var(--surface)} .spoiler-switch[hidden]{display:none} .spoiler-switch__btn{min-height:44px;padding:0 14px;border:1px solid var(--c-gold-light);border-radius:var(--radius);background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer} .spoiler-switch__btn:focus-visible{outline:2px solid var(--c-gold-light);outline-offset:2px} .spoiler-switch__desc{font-size:13px;color:var(--ink-soft);flex:1 1 220px} /* ===================================================================== KOMPONENTY (zadanie 3.5) - według oryginalnych plansz (home, hub, news, lore). Galeria tylko lokalnie: /__dev/komponenty (tools/router.php). Kolory wyłącznie z tokenów. ===================================================================== */ .icon{display:inline-block;vertical-align:-.15em;flex:none} /* etykieta nad tytułem: „DIABLO V • NOWY ROZDZIAŁ” z krótką złotą kreską */ .eyebrow{display:inline-block;margin:0 0 var(--s-1);padding-bottom:6px;font-family:var(--font-head);font-size:var(--fs-xs); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold); background:linear-gradient(var(--gold),var(--gold)) left bottom/72px 1px no-repeat} /* ramka z narożnikami: cienka złota linia + odsunięte narożniki (status gry, legenda, wyróżniona karta) */ .frame{position:relative;background:var(--surface);border:1px solid var(--c-line-ui);border-radius:var(--radius);padding:var(--s-2) var(--s-3)} .frame::before{content:"";position:absolute;inset:-5px;pointer-events:none; background: linear-gradient(var(--gold),var(--gold)) left top/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) left top/1px 16px no-repeat, linear-gradient(var(--gold),var(--gold)) right top/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/1px 16px no-repeat, linear-gradient(var(--gold),var(--gold)) left bottom/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/1px 16px no-repeat, linear-gradient(var(--gold),var(--gold)) right bottom/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/1px 16px no-repeat} .frame--gold{border-color:var(--gold)} /* separatory: linia z rombem; z podpisem wersalikami w środku */ .sep{height:10px;margin:var(--s-3) 0;border:0; background:var(--diamond) center/9px 9px no-repeat,linear-gradient(var(--c-line-ui),var(--c-line-ui)) center/100% 1px no-repeat} .sep--label{display:flex;align-items:center;gap:var(--s-2);height:auto;background:none; font-family:var(--font-head);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)} .sep--label::before,.sep--label::after{content:"";flex:1;height:1px;background:var(--c-line-ui)} /* etykiety: gra (czerwień), status informacji (tekst w kolorze statusu + ramka - nigdy sam kolor) */ .tag{display:inline-block;padding:2px 8px;border:1px solid transparent;border-radius:var(--radius);font-family:var(--font-head); font-size:11px;font-weight:600;letter-spacing:.14em;line-height:1.5;text-transform:uppercase} .tag--game{background:var(--accent);color:var(--on-accent);border-color:color-mix(in srgb,var(--gold) 50%,transparent)} .tag--official{color:var(--c-ok);border-color:var(--c-ok-line);background:var(--c-ok-bg)} .tag--analysis{color:var(--c-warn);border-color:var(--c-warn-line);background:var(--c-warn-bg)} .tag--speculation{color:var(--c-danger);border-color:var(--c-danger-line);background:var(--c-danger-bg)} .tag--soon{color:var(--accent-ink);border-color:var(--gold);background:var(--bg)} /* meta wpisu: gra, data, komentarze z ikonami */ .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s-2);font-size:var(--fs-sm);color:var(--ink-soft);list-style:none;margin:0;padding:0} .meta li{display:inline-flex;align-items:center;gap:6px} .meta .icon{color:var(--gold)} /* karty: wspólna podstawa */ .ncard,.gcard,.promo,.hcard,.lcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--c-line); border-radius:var(--radius);overflow:hidden;transition:border-color .15s ease} .ncard:hover,.gcard:hover,.promo:hover,.hcard:hover,.lcard:hover{border-color:var(--gold)} .ncard a,.gcard a,.promo a,.hcard a,.lcard a{color:inherit} .ncard a:hover,.gcard a:hover,.hcard a:hover,.lcard a:hover{text-decoration:none} /* cała karta klikalna przez link tytułu (jeden link w kolejności Tab) */ .card-link::after{content:"";position:absolute;inset:0;z-index:1} .card-link:focus-visible{outline:none} .ncard:focus-within,.gcard:focus-within,.hcard:focus-within,.lcard:focus-within,.promo:focus-within{outline:2px solid var(--focus);outline-offset:2px} .card-arrow{position:absolute;right:var(--s-2);bottom:var(--s-2);color:var(--gold)} @media (prefers-reduced-motion:reduce){.ncard,.gcard,.promo,.hcard,.lcard{transition:none}} /* wiadomość: ilustracja, etykieta gry na zdjęciu, tytuł, zajawka, meta, strzałka */ .ncard__media{position:relative;aspect-ratio:16/9;background:var(--surface-2)} .ncard__media img{width:100%;height:100%;object-fit:cover} .ncard__media .tag{position:absolute;left:var(--s-2);bottom:var(--s-1)} .ncard__body{display:flex;flex-direction:column;gap:6px;padding:var(--s-2) var(--s-2) var(--s-3)} .ncard__title{font-size:var(--fs-h4);margin:0;color:var(--ink)} .ncard__lead{margin:0;font-size:var(--fs-sm);color:var(--ink-soft)} .ncard .meta{padding-right:var(--s-4)} .ncard--feature{display:grid;grid-template-columns:1fr} @media (min-width:768px){ .ncard--feature{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} .ncard--feature .ncard__media{aspect-ratio:auto;min-height:100%} .ncard--feature .ncard__body{justify-content:center;padding:var(--s-4)} .ncard--feature .ncard__title{font-size:var(--fs-h2)} } /* gra: wysoka ilustracja, nazwa wersalikami złotem i czerwony romb; wyróżniona „Nadchodzi” w złotej ramce z narożnikami */ .gcard{aspect-ratio:3/4.4;justify-content:flex-end;text-align:center;background:var(--bg);isolation:isolate} .gcard__media{position:absolute;inset:0;z-index:-1} /* pod tekstem bez pozycjonowania tytułu - nakładka linku obejmuje całą kartę */ .gcard__media img{width:100%;height:100%;object-fit:cover} .gcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 8%,transparent 55%)} .gcard__name{margin:0;padding:0 var(--s-1) 26px;font-size:var(--fs-h4);letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold-light); background:var(--diamond-red) center bottom 8px/9px 9px no-repeat} .gcard .tag{position:relative;margin:0 auto var(--s-2)} .gcard--featured{border-color:var(--gold);overflow:visible} .gcard--featured::before{content:"";position:absolute;inset:-5px;z-index:2;pointer-events:none; background: linear-gradient(var(--gold),var(--gold)) left top/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left top/2px 14px no-repeat, linear-gradient(var(--gold),var(--gold)) right top/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/2px 14px no-repeat, linear-gradient(var(--gold),var(--gold)) left bottom/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/2px 14px no-repeat, linear-gradient(var(--gold),var(--gold)) right bottom/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/2px 14px no-repeat} /* promocja: szeroka ilustracja z przyciemnieniem, tytuł, opis i przycisk */ .promo{min-height:180px;justify-content:flex-end;padding:var(--s-3)} .promo__media{position:absolute;inset:0} .promo__media img{width:100%;height:100%;object-fit:cover} .promo__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,color-mix(in srgb,var(--bg) 92%,transparent) 30%,transparent 85%)} .promo__body{position:relative;max-width:420px} .promo__title{margin:0 0 4px;font-size:var(--fs-h3);color:var(--ink)} .promo__text{margin:0 0 var(--s-2);font-size:var(--fs-sm);color:var(--ink-soft)} .promo .btn{position:relative;z-index:2} /* poradnik (poziomo): ilustracja z lewej, kategoria, tytuł, opis, meta */ .hcard__media{aspect-ratio:16/9;background:var(--surface-2)} .hcard__media img{width:100%;height:100%;object-fit:cover} .hcard__body{display:flex;flex-direction:column;gap:6px;padding:var(--s-2) 56px var(--s-2) var(--s-2)} .hcard__title{margin:0;font-size:var(--fs-h3);color:var(--ink)} .hcard__text{margin:0;font-size:var(--fs-sm);color:var(--ink-soft)} .hcard .tag{align-self:flex-start} .hcard .card-arrow{top:50%;bottom:auto;transform:translateY(-50%)} @media (min-width:640px){.hcard{flex-direction:row}.hcard__media{flex:0 0 40%;aspect-ratio:auto;min-height:150px}} /* hasło uniwersum: ilustracja u góry, tytuł, opis, strzałka */ .lcard__media{position:relative;aspect-ratio:4/3;background:var(--surface-2)} .lcard__media img{width:100%;height:100%;object-fit:cover} .lcard__body{padding:var(--s-2) var(--s-2) var(--s-5)} .lcard__title{margin:0 0 6px;font-size:var(--fs-h3);color:var(--ink)} .lcard__text{margin:0;font-size:var(--fs-sm);color:var(--ink-soft)} /* podpis ilustracji („Ilustracja koncepcyjna” / „Wizja artystyczna”) w rogu zdjęcia */ .media-caption{position:absolute;right:var(--s-1);bottom:4px;z-index:1;font-size:11px;color:var(--ink);text-shadow:0 1px 2px var(--c-black),0 0 6px var(--c-black)} /* zakładki: pasek w ramce, aktywna na czerwieni ze złotą ramką i aria-current (nie tylko kolor - także obramowanie) */ .tabs{display:flex;flex-wrap:wrap;border:1px solid var(--c-line-ui);border-radius:var(--radius);background:var(--surface);list-style:none;margin:0 0 var(--s-3);padding:3px} .tabs li{flex:1 1 auto;display:flex} .tabs a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s-2);font-family:var(--font-head);font-size:var(--fs-lg); color:var(--ink);border:1px solid transparent;border-radius:var(--radius);text-align:center} .tabs li + li a{box-shadow:-1px 0 0 var(--c-line)} .tabs a:hover{color:var(--accent-ink);text-decoration:none} .tabs a[aria-current],.tabs a.is-active{background:var(--accent);border-color:var(--gold);color:var(--on-accent);box-shadow:none} /* filtry w ramce: pola z etykietą nad nimi, przycisk i „Resetuj filtry”; przyciski wyboru (gry) */ .filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-2) var(--s-3)} .filters__field{display:flex;flex-direction:column;gap:4px;min-width:150px;flex:1 1 150px} .filters__field label{font-size:var(--fs-sm);color:var(--ink-soft)} .filters__reset{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);font-size:var(--fs-sm)} .filters__reset .icon{color:var(--gold)} .chips{display:flex;flex-wrap:wrap;gap:var(--s-1);list-style:none;margin:0;padding:0} .chip{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);border:1px solid var(--c-line-ui);border-radius:var(--radius); background:transparent;color:var(--ink);font-family:var(--font-head);font-size:var(--fs-base)} .chip:hover{border-color:var(--gold);text-decoration:none;color:var(--accent-ink)} .chip[aria-current],.chip.is-active{background:var(--accent);border-color:var(--gold);color:var(--on-accent)} /* pola: ciemne ze złotą obwódką; pole szukania z ikoną */ .field-dc{display:block;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--c-line-ui);border-radius:var(--radius); background:var(--surface-2);color:var(--ink);font:inherit} .field-dc:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)} .field-dc::placeholder{color:var(--muted)} select.field-dc{appearance:none;padding-right:36px;cursor:pointer; background:linear-gradient(45deg,transparent 50%,var(--gold) 50%) right 18px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--gold) 50%) right 13px center/6px 6px no-repeat,var(--surface-2)} .searchbox{position:relative;display:flex} .searchbox .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none} .searchbox .field-dc{padding-left:40px} /* ramka źródła: „ŹRÓDŁO OFICJALNE”, nazwa (link), opis, ikona linku zewnętrznego */ .source-box{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap} .source-box__label{display:block;font-family:var(--font-head);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold)} .source-box__name{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-head);font-size:var(--fs-lg);color:var(--ink)} .source-box__text{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink-soft)} .source-box__body{flex:1 1 240px} .source-box > .icon{color:var(--gold)} /* ramka premiery: jasne tło jak pergamin (kość) z ciemnym tekstem */ .release-box{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--gold);border-radius:var(--radius); background:var(--c-bone);color:var(--c-obsidian);box-shadow:inset 0 0 0 3px var(--c-bone),inset 0 0 0 4px var(--gold); font-family:var(--font-head);font-size:var(--fs-h4)} .release-box .icon{color:var(--accent)} /* pasek statusu gry: komórki z ikoną, etykietą wersalikami i wartością (źródło zawsze tekstem, bez logo Blizzarda) */ .status-bar{display:grid;grid-template-columns:1fr;gap:var(--s-2)} .status-bar__item{display:flex;align-items:center;gap:var(--s-2)} .status-bar__item .icon{color:var(--gold)} .status-bar__label{display:block;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .status-bar__value{display:block;font-family:var(--font-head);font-size:var(--fs-lg);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} @media (min-width:768px){ .status-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:0} .status-bar__item{justify-content:center;padding:0 var(--s-2)} .status-bar__item + .status-bar__item{border-left:1px solid var(--c-line-ui)} } /* ===================================================================== STRONA GŁÓWNA (zadanie 3.8) - plansza `home` ===================================================================== */ .home{padding-bottom:var(--s-4)} /* hero na całą szerokość ekranu (poza kontenerem): ilustracja z prawej, tekst z lewej, przyciemnienie od lewej */ .home-hero{position:relative;display:flex;align-items:center;min-height:clamp(380px,46vw,560px);margin:0 calc(50% - 50vw) var(--s-4); padding:var(--s-5) max(var(--gutter),calc(50vw - var(--maxw) / 2 + var(--gutter)));overflow:hidden;background:var(--bg)} .home-hero__media{position:absolute;inset:0 0 0 30%} .home-hero__img{width:100%;height:100%;object-fit:cover;object-position:center 60%} /* T.7: nowe hero - brama i wędrowiec w kadrze */ .home-hero__media::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 30%,transparent 70%),linear-gradient(to top,var(--bg) 0%,transparent 35%)} .home-hero .media-caption{z-index:2;right:var(--s-2);bottom:var(--s-1)} .home-hero__body{position:relative;z-index:2;max-width:620px} .home-hero__title{margin:0 0 var(--s-2);font-size:clamp(2.25rem,1.2rem + 4vw,4.75rem);line-height:1.02;color:var(--ink)} /* większy niż h1 podstron - jak na planszy (3.19) */ .home-hero__lead{margin:0 0 var(--s-4);font-size:var(--fs-lg);color:var(--ink)} .home-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)} @media (max-width:767px){ .home-hero{flex-direction:column;align-items:stretch;min-height:0;padding-top:0;padding-bottom:var(--s-3)} .home-hero__media{position:relative;inset:auto;margin:0 calc(-1 * var(--gutter)) calc(-1 * var(--s-5));aspect-ratio:4/3} .home-hero__media::before{background:linear-gradient(to top,var(--bg) 2%,transparent 45%)} } /* pasek Diablo V: sygnet i nazwa, planowana premiera, odnośnik do zapowiedzi */ .home-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-1) var(--s-4);margin:0 0 var(--s-5)} .home-bar__game{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;font-family:var(--font-head);font-size:var(--fs-lg);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)} .home-bar__game img{height:32px;width:auto} .home-bar__release{margin:0;font-family:var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} .home-bar__release span{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--ink-soft)} .home-bar__release strong{font-weight:600;font-size:var(--fs-lg)} /* sekcje i siatki kart */ .home-section{margin:0 0 var(--s-5)} .home-grid{display:grid;gap:var(--s-3)} @media (min-width:768px){ .home-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .home-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} } /* promocje jak na planszy (3.19): sama karta na całą szerokość; na komputerze przycisk w prawym dolnym rogu, obok tekstu */ .home-grid--2 > .promo:only-child{grid-column:1/-1} @media (min-width:1024px){ .home-grid--2 .promo__body{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-3);align-items:end} .home-grid--2 .promo__title,.home-grid--2 .promo__text{grid-column:1;max-width:420px} .home-grid--2 .promo__text{margin:0} .home-grid--2 .promo .btn{grid-column:2;grid-row:1 / span 2;align-self:end} } .home-grid--games{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)} @media (min-width:640px){.home-grid--games{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1024px){.home-grid--games{grid-template-columns:repeat(6,minmax(0,1fr))}} /* T.7: jeden podpis pod rzędem kart gier zamiast „Wizja artystyczna” na każdej karcie (decyzja 15) */ .row-caption{margin:var(--s-1) 0 0;text-align:right;font-size:12px;color:var(--ink-2)} .ncard__status{margin:0} /* karta gry bez ilustracji (redakcja jeszcze jej nie dodała): ornament i winieta zamiast pustego pola */ .gcard__media:empty{background:var(--ornament) center/64px 64px,radial-gradient(circle at 50% 35%,var(--surface-2) 0%,var(--bg) 75%)} /* ankieta na stronie głównej (decyzja 3) */ .home-poll{max-width:720px;margin:0 auto var(--s-4)} .home-poll__title{margin:0 0 var(--s-1);font-size:var(--fs-h3);color:var(--ink)} /* ===================================================================== LISTY: nagłówek z tłem, filtry, karty (zadanie 3.9) - plansza `news` (lewa) ===================================================================== */ .page-head{position:relative;display:flex;align-items:flex-end;min-height:clamp(200px,24vw,300px);margin:0 calc(50% - 50vw) var(--s-3); padding:var(--s-5) max(var(--gutter),calc(50vw - var(--maxw) / 2 + var(--gutter))) var(--s-3);overflow:hidden;background:var(--bg)} .page-head__media{position:absolute;inset:0 0 0 35%} .page-head__media > span[aria-hidden]{position:absolute;inset:0} .page-head__img{width:100%;height:100%;object-fit:cover;opacity:.75} .page-head__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 35%,transparent 80%),linear-gradient(to top,var(--bg) 0%,transparent 50%)} /* T.9: przy ozdobnych brzegach (≥ 1280 px) hero i nagłówki stron na całą szerokość bez pełnego tła, a dół ich ilustracji zanika - ornament wyłania się spod nich płynnie zamiast zaczynać się prostą linią (reguła po definicjach .home-hero i .page-head). Maska tylko na obrazie i jego przyciemnieniu - podpis „Wizja artystyczna” zostaje widoczny (zasada 4). */ @media (min-width:1280px){ .home-hero,.page-head{background:transparent} .home-hero__img,.home-hero__media::before{-webkit-mask-image:linear-gradient(to bottom,var(--c-black) calc(100% - 200px),transparent);mask-image:linear-gradient(to bottom,var(--c-black) calc(100% - 200px),transparent)} .page-head__img,.page-head__media::before{-webkit-mask-image:linear-gradient(to bottom,var(--c-black) 55%,transparent);mask-image:linear-gradient(to bottom,var(--c-black) 55%,transparent)} /* niższe nagłówki podstron - krótsze zanikanie */ } .page-head .media-caption{z-index:2} .page-head__body{position:relative;z-index:2;max-width:720px} .page-head__title{margin:0 0 var(--s-1);font-size:var(--fs-h1);line-height:1.05;color:var(--ink)} .page-head__lead{margin:0;font-size:var(--fs-lg);color:var(--ink)} .list-page{padding-bottom:var(--s-4)} .list-page .breadcrumb{margin-bottom:0} .list-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2)} .list-tools .topicbar{margin:0} .list-tools__search{flex:0 1 320px;min-width:220px} .list-page__more{text-align:center;margin:var(--s-3) 0 0} .news-list--compact{grid-template-columns:1fr} @media (max-width:767px){.list-tools__search{flex:1 1 100%}} /* ===================================================================== ARTYKUŁ (zadanie 3.10) - plansza `news` (prawa) ===================================================================== */ .article-page{padding-bottom:var(--s-4)} .article-page .article{background:none;border:0;box-shadow:none;padding:0} .article__header{border-bottom:0;padding-bottom:0;margin-bottom:var(--s-3)} .article__labels{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);margin-bottom:var(--s-1)} .article__labels .info-status{display:inline-block;margin:0;padding:2px 8px;border:1px solid currentColor;border-radius:var(--radius); font-family:var(--font-head);font-size:11px;letter-spacing:.14em} .article__header .info-status{margin-left:0} .article__cat{font-family:var(--font-head);font-size:var(--fs-xs);letter-spacing:var(--ls-label)} .article__title{font-size:var(--fs-h1);line-height:1.08;color:var(--ink);margin:var(--s-1) 0 var(--s-2)} .article__meta{gap:var(--s-1) var(--s-3);font-size:var(--fs-sm);color:var(--ink-soft)} .article__meta > span,.article__meta > a{display:inline-flex;align-items:center;gap:6px} .article__meta .icon{color:var(--gold)} .article__meta b,.article__author b{color:var(--ink);font-weight:500} .article__game{display:inline-flex;align-items:center;gap:6px;color:var(--ink)} .article__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)} @media (min-width:1024px){.article__grid.has-toc{grid-template-columns:minmax(0,1fr) 260px}.article__grid.has-toc > .article__aside{grid-column:2;grid-row:1}.article__grid.has-toc > .article__main{grid-column:1;grid-row:1}} .article__main{min-width:0;max-width:860px} .article__hero{position:relative;margin:0 0 var(--s-3);border:1px solid var(--c-line);border-radius:var(--radius)} .article__hero-cap{padding:6px var(--s-1);font-size:13px;color:var(--ink-soft);background:var(--surface)} .article__lead{margin:0 0 var(--s-3);font-family:var(--font-head);font-size:var(--fs-h4);font-weight:600;line-height:1.35;color:var(--ink)} .article__content{font-size:var(--fs-lg);line-height:1.7} .article__content h2.art-heading{font-size:var(--fs-h3);margin:1.5em 0 .5em} .article__content h3.art-heading{font-size:var(--fs-h4)} .article__content th,.article__content td{border-color:var(--c-line-ui)} .article__content blockquote{border-left-color:var(--gold)} .article__aside{min-width:0} .article__aside .toc{position:sticky;top:var(--s-2);margin:0;padding:var(--s-2) var(--s-3)} .toc__title{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 var(--s-1)} .toc__list a{display:inline-flex;align-items:center;min-height:36px;padding:2px 0 2px 16px;font-size:var(--fs-sm);color:var(--ink);text-decoration:none; background:var(--diamond) left center/7px 7px no-repeat} .toc__list a:hover{color:var(--accent-ink)} .toc__list li.lvl-2 a::before{content:none} .article-page .release-box,.article-page .source-box{margin:var(--s-3) 0} .article-page .article__source{font-size:inherit} .article__tags a,.tagcloud a{display:inline-flex;align-items:center;min-height:36px;border-radius:var(--radius);border-color:var(--c-line-ui);background:transparent} .share__btn,.vote__btn{border-radius:var(--radius);min-height:44px} /* T.10: pola dotyku ≥ 44 px przy prawdziwych treściach bez zmiany wyglądu - dopełnienie zjedzone ujemnym marginesem (układ i rysunek jak dotąd, większy jest tylko obszar kliknięcia) */ .article__cat,.article__author,.article__game,.article__meta > a.meta-ico,.hub-bar__item dd a{display:inline-flex;align-items:center;padding:13px 6px;margin:-13px -6px} .article__meta > a.meta-ico{padding:13px 10px;margin:-13px -10px} /* sam licznik jest wąski - szerokość też ≥ 44 px */ .toc__list a{min-height:44px;margin:-4px 0} /* tagi: ramka rysowana o 4 px niżej i wyżej niż pole kliknięcia (wygląd 36 px, pole 44 px; -1 px = przezroczysta ramka elementu) */ .article__tags a,.tagcloud a{position:relative;min-height:44px;margin:-4px 0;border-color:transparent} .article__tags a::before,.tagcloud a::before{content:"";position:absolute;inset:3px -1px;border:1px solid var(--c-line-ui);border-radius:var(--radius);pointer-events:none} .article__tags a:hover,.tagcloud a:hover{border-color:transparent} .article__tags a:hover::before,.tagcloud a:hover::before{border-color:var(--accent-ink)} @media (max-width:640px){.share__btn{min-width:44px;justify-content:center}} .lore-card__title a{display:inline-block;padding:12px 6px;margin:-12px -6px} .card__title a{display:inline-block;padding:13px 0;margin:-13px 0} .typefilter__item{display:inline-flex;align-items:center;justify-content:center;min-height:44px} /* jak filtry .chip - przycisk z ramką, 44 px */ /* etykieta tematu: pigułka (27 px, na telefonie 32 px) rysowana pod tekstem, pole kliknięcia 44 px */ .article__topic{position:relative;z-index:0;display:inline-flex;align-items:center;min-height:44px;margin-block:-8.5px;background:none;border-color:transparent} .article__topic::before{content:"";position:absolute;z-index:-1;inset:7.5px -1px;background:var(--line-soft);border:1px solid var(--line);border-radius:99px} .article__topic:hover{background:none;border-color:transparent} .article__topic:hover::before{background:var(--accent);border-color:var(--accent)} @media (max-width:640px){.article__topic{margin-block:0 -6px}.article__topic::before{inset:5px -1px}} .vote,.author-box,.article__follow{border-color:var(--c-line);border-radius:var(--radius)} .article-more{margin:var(--s-5) 0 0} .comments{background:none;border:0;box-shadow:none;padding:0;margin-top:var(--s-5)} .comments__title{font-size:var(--fs-h2);border-bottom:0;padding-bottom:0;margin:0 0 var(--s-2)} .comment__avatar{background:var(--c-blood-deep);color:var(--ink);border:1px solid var(--gold)} .report{border-color:var(--c-line);border-radius:var(--radius)} /* ===================================================================== CENTRUM DIABLO V (zadanie 3.11) - plansza `hub` ===================================================================== */ .hub-hero{min-height:clamp(420px,48vw,600px);margin-bottom:var(--s-3)} .hub-hero .breadcrumb{margin:0 0 var(--s-2)} .hub-hero__title{font-size:clamp(2.75rem,1.6rem + 5vw,5.5rem);letter-spacing:.02em;text-transform:uppercase} .hub-bar{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3)} .hub-bar .status-bar{margin:0} .hub-bar dd{margin:0} .hub-bar .status-bar__value a{color:var(--ink)} .hub-bar__more{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s-1)} .game-page--hub .tabs{margin-bottom:var(--s-4)} /* Co wiemy: ilustracja z lewej, status nad tytułem; legenda w ramce z rombami w kolorze statusu */ .game-facts-wrap{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-4)} .fact{grid-template-columns:240px minmax(0,1fr);gap:var(--s-2);border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:none;padding-bottom:var(--s-2)} .fact__title{font-size:var(--fs-h4)} .fact .game-figure img{border:1px solid var(--c-line)} .info-legend{position:relative;border-color:var(--c-line-ui);padding:var(--s-2) var(--s-3)} .info-legend__title{font-size:var(--fs-h3)} .info-legend__item{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s-1);padding:var(--s-1);border:1px solid var(--c-line);border-radius:var(--radius)} .info-legend__item dt{grid-column:2} .info-legend__item dd{grid-column:2} .info-legend__item::before{content:"";grid-row:1 / span 2;align-self:center;width:22px;height:22px;margin-left:6px;transform:rotate(45deg);border:2px solid currentColor; box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 9px currentColor} .info-legend__item:has(.info-status--official){color:var(--c-ok)} .info-legend__item:has(.info-status--analysis){color:var(--c-warn)} .info-legend__item:has(.info-status--speculation){color:var(--c-danger)} .info-legend__item dd{color:var(--ink-soft)} /* klasy: duża ilustracja, nazwa krojem nagłówków, podpis ilustracji w rogu */ .class-grid{gap:var(--s-3)} .class-card{border-color:var(--c-line);background:var(--surface)} .class-card .game-figure img{aspect-ratio:4/3} .class-card__name{font-size:var(--fs-h3)} /* droga do premiery: złota linia, czerwone punkty */ .timeline{border-left-color:var(--gold)} .timeline__item::before{border-color:var(--c-live);background:var(--bg)} .timeline__item--highlight::before{background:var(--c-live)} .timeline__label{font-family:var(--font-head);font-size:var(--fs-lg);color:var(--c-gold-light)} /* FAQ: wiersze w złotej ramce, + / − */ .faq__item{border-color:var(--c-line-ui)} .faq__q{font-family:var(--font-head);font-size:var(--fs-lg)} @media (max-width:900px){.game-facts-wrap{grid-template-columns:1fr}.fact{grid-template-columns:1fr}} /* tytuły sekcji karty gry i Centrum - jak nagłówek sekcji z 3.5 (duży, linia ze złotym rombem) */ .game-section__title{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-h2);line-height:1.1;margin:0 0 var(--s-2)} .game-section__title::after{content:"";flex:1 1 40px;min-width:40px;height:10px; background:var(--diamond) center/9px 9px no-repeat,linear-gradient(var(--c-line-ui),var(--c-line-ui)) center/100% 1px no-repeat} @media (max-width:640px){.game-section__title{flex-wrap:wrap}.game-section__title::after{flex-basis:100%}} /* pasek statusu w Centrum: ikona w dt (poprawna lista dl) - wysunięta w lewo, etykieta i wartość obok */ .hub-bar .status-bar__item{position:relative;display:block;padding-left:48px;min-height:40px} .hub-bar .status-bar__label .icon{position:absolute;left:0;top:50%;transform:translateY(-50%)} @media (min-width:768px){.hub-bar .status-bar__item{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:calc(var(--s-2) + 48px)} .hub-bar .status-bar__label .icon{left:var(--s-2)}} /* ===================================================================== GRY I KARTA GRY (zadanie 3.12) - plansza `lore` 05 ===================================================================== */ .gtile-grid{display:grid;grid-template-columns:1fr;gap:var(--s-3);margin-top:var(--s-3)} @media (min-width:768px){.gtile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .gtile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(220px,24vw,300px);padding:var(--s-3) 64px var(--s-3) var(--s-3); background:var(--bg);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;isolation:isolate;transition:border-color .15s ease} .gtile:hover{border-color:var(--gold)} .gtile:focus-within{outline:2px solid var(--focus);outline-offset:2px} .gtile__media{position:absolute;inset:0;z-index:-1} .gtile__media img{width:100%;height:100%;object-fit:cover} .gtile__media:empty{background:var(--ornament) center/64px 64px,radial-gradient(circle at 70% 30%,var(--surface-2) 0%,var(--bg) 75%)} .gtile__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 5%,color-mix(in srgb,var(--bg) 40%,transparent) 55%,transparent 85%)} .gtile__name{margin:0 0 4px;font-size:var(--fs-h3);color:var(--ink)} .gtile__name a{color:inherit} .gtile__name a:hover{text-decoration:none} .gtile__text{margin:0;font-size:var(--fs-sm);color:var(--ink)} .gtile .tag{align-self:flex-start;margin-top:var(--s-1)} .gtile .media-caption,.gcard .media-caption{z-index:1;top:var(--s-1);bottom:auto} /* podpis u góry - nie nachodzi na „Nadchodzi” (3.22) */ .gtile--featured{border-color:var(--gold);overflow:visible} .gtile--featured::before{content:"";position:absolute;inset:-5px;z-index:2;pointer-events:none; background: linear-gradient(var(--gold),var(--gold)) left top/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left top/2px 14px no-repeat, linear-gradient(var(--gold),var(--gold)) right top/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/2px 14px no-repeat, linear-gradient(var(--gold),var(--gold)) left bottom/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/2px 14px no-repeat, linear-gradient(var(--gold),var(--gold)) right bottom/14px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/2px 14px no-repeat} .gtile--featured .gtile__media{overflow:hidden;border-radius:var(--radius)} @media (prefers-reduced-motion:reduce){.gtile{transition:none}} /* pas „Dodatki i nowe wydania”: pozycje rozdzielone rombami */ .releases-strip{margin-top:var(--s-5)} .releases-strip__list{display:flex;flex-wrap:wrap;gap:var(--s-2) 0;list-style:none;margin:0;padding:var(--s-2) var(--s-1);border:1px solid var(--c-line-ui);border-radius:var(--radius)} .releases-strip__item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 160px;padding:0 var(--s-2); background:var(--diamond) right center/7px 7px no-repeat} .releases-strip__item:last-child{background:none} .releases-strip__kind{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .releases-strip__name{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-head);font-size:var(--fs-lg);color:var(--ink)} .releases-strip__meta{font-size:13px;color:var(--muted)} /* karta gry: status w miejscu etykiety nad tytułem */ .game-hero .eyebrow.game-status{border:0;padding:0 0 6px;font-weight:400} .game-hero .game-head__release{margin:0 0 var(--s-2);color:var(--ink)} /* ===================================================================== PORADNIKI I UNIWERSUM (zadanie 3.13) - plansza `lore` 06–07 ===================================================================== */ .guides-follow{margin:0 0 var(--s-2)} .guides-page .guides-filters{margin:0 0 var(--s-2);padding:var(--s-2) var(--s-3);background:var(--surface);border-color:var(--c-line-ui)} .guides-filters__field label{font-size:var(--fs-sm);line-height:20px;letter-spacing:0;text-transform:none} @media (min-width:600px){ /* podpowiedź pod „Klasą” nie przesuwa wiersza (3.19): pola od góry, przycisk na wysokości list */ .guides-page .guides-filters{align-items:flex-start} .guides-page .guides-filters__go,.guides-page .guides-filters__reset{margin-top:24px} } .guides-filters__field select.field-dc{min-height:44px} .guides-filters__field select.field-dc:not([disabled]):has(option:checked:not([value=""])){background-color:var(--accent);border-color:var(--gold)} .guide-list{gap:var(--s-2)} .hcard__labels{margin:0;display:flex;flex-wrap:wrap;gap:6px} .guides-page .guides-hub{margin:var(--s-4) 0 0;min-height:200px;background:var(--bg)} .guides-page .guides-hub .promo__title{font-size:var(--fs-h2)} .guides-page .guides-hub .media-caption{z-index:1} /* Uniwersum: cztery kafle działów z ilustracjami, kronika jako szeroki pas */ .lore-page .lore-sections{grid-template-columns:1fr;gap:var(--s-3);margin-top:var(--s-3)} @media (min-width:640px){.lore-page .lore-sections{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1024px){.lore-page .lore-sections{grid-template-columns:repeat(4,minmax(0,1fr))}} .lore-page .lore-sections{align-items:stretch} /* karty działów równej wysokości, strzałki w jednej linii (3.19) */ .lore-section{display:flex} .lore-section .lcard__media img{width:100%;height:100%;object-fit:cover} .lore-section__count{margin:var(--s-1) 0 0;font-size:13px;color:var(--muted)} .lore-page .lore-chronicle{margin:var(--s-4) 0 0;min-height:200px;background:var(--bg);text-align:center;align-items:center} .lore-page .lore-chronicle .promo__media::after{background:linear-gradient(to top,color-mix(in srgb,var(--bg) 90%,transparent) 15%,transparent 80%)} .lore-page .lore-chronicle .promo__body{max-width:none} .lore-page .lore-chronicle .media-caption{z-index:1} /* hasła na listach działu i powiązane - jak kafle haseł z 3.5 */ .lore-grid{gap:var(--s-3)} .lore-card{border-color:var(--c-line);transition:border-color .15s ease} .lore-card:hover{border-color:var(--gold)} .lore-card__body{padding:var(--s-2)} .lore-card__title{font-size:var(--fs-h4)} @media (max-width:767px){.lore-grid{grid-template-columns:1fr}} /* ===================================================================== STRONY PROSTE (zadanie 3.14) - O nas, Kontakt, Prywatność, Szukaj, 404 (podglądy PSD 08–12) ===================================================================== */ .simple-page{padding-bottom:var(--s-4)} .simple-head{margin:var(--s-2) 0 var(--s-4)} .simple-head__title{margin:0;font-size:var(--fs-h1);line-height:1.08;color:var(--ink)} .simple-page .page-box{max-width:860px;background:none;border:0;box-shadow:none;padding:0} .simple-page .page-content{font-size:var(--fs-lg)} .simple-page .page-content h2{font-size:var(--fs-h3);margin:1.5em 0 .5em} .simple-page .page-content a{color:var(--link);text-decoration:underline} .simple-page .simple-h2{font-size:var(--fs-h2);margin:var(--s-4) 0 var(--s-2)} .contact-data{font-style:normal;margin:0 0 var(--s-3);font-size:var(--fs-base)} .contact-data div{display:flex;align-items:center;min-height:36px} /* pola formularzy w całym serwisie: ciemne, złota obwódka, ≥ 44 px (jak pole .field-dc z 3.5) */ .form-field label{font-size:var(--fs-base);font-weight:400;color:var(--ink)} .form-field input[type=text],.form-field input[type=email],.form-field input[type=password], .form-field input[type=search],.form-field textarea,.form-field select{min-height:44px;background:var(--surface-2);color:var(--ink);border:1px solid var(--c-line-ui);border-radius:var(--radius)} .form-field textarea{min-height:160px} .form-check{font-size:var(--fs-sm)} .form-check input{width:20px;height:20px;accent-color:var(--accent);margin-top:12px;flex:0 0 auto} .form-check label{min-height:44px;padding:10px 0} /* klikalna etykieta zgody ≥ 44 px (3.18) */ /* captcha: obrazek w ramce w kolorach strony, przycisk odświeżenia 44 px */ .captcha__img{border:1px solid var(--c-line-ui);border-radius:var(--radius)} .captcha__reload{width:44px;height:44px;border-color:var(--c-line-ui);border-radius:var(--radius);background:transparent;color:var(--ink)} /* wyszukiwarka */ .search-page__form{display:flex;flex-wrap:wrap;gap:var(--s-2);max-width:860px;margin:0 0 var(--s-3)} .search-page__form .searchbox{flex:1 1 320px} .search-page__form .field-dc{min-height:52px;font-size:var(--fs-lg)} .search-page__count{color:var(--ink-soft);margin:0 0 var(--s-2)} /* 404: duża liczba, tekst, przycisk; ilustracja z prawej */ .error-page__grid{display:grid;grid-template-columns:1fr;gap:var(--s-4);align-items:start} @media (min-width:768px){.error-page__grid{grid-template-columns:minmax(0,1fr) minmax(0,460px)}} .error-page__code{margin:0 0 var(--s-3);font-family:var(--font-head);font-size:clamp(5rem,3rem + 8vw,9rem);line-height:1;color:var(--gold)} .error-page__text{margin:0 0 var(--s-3);font-size:var(--fs-lg);color:var(--ink)} .error-page__search{max-width:420px;margin:0 0 var(--s-3)} .error-page__media{position:relative;margin:0;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden} .error-page__media img{width:100%;height:auto} /* ===================================================================== STRONY KONTA (zadanie 3.15) - logowanie, rejestracja, aktywacja, konto, powiadomienia, profil ===================================================================== */ .auth-box{max-width:480px;margin:var(--s-4) auto var(--s-5);padding:var(--s-4) var(--s-4) var(--s-3);background:var(--surface);border-color:var(--c-line-ui)} .auth-box h1{font-size:var(--fs-h2);text-align:center;margin:0 0 var(--s-1)} .auth-box h1::after{content:"";display:block;height:10px;margin:var(--s-1) auto 0;max-width:200px; background:var(--diamond) center/9px 9px no-repeat,linear-gradient(var(--c-line-ui),var(--c-line-ui)) center/100% 1px no-repeat} .auth-box .sub{text-align:center;font-size:var(--fs-base)} .auth-box .btn{width:100%} .auth-alt{font-size:var(--fs-sm)} .auth-alt a{display:inline-flex;align-items:center;min-height:44px} .form-note{font-size:13px;color:var(--ink-soft)} .account-page .page-box{background:var(--surface);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:none;padding:var(--s-3)} .box-title{margin:0 0 var(--s-2);font-size:var(--fs-h3);color:var(--ink);padding-bottom:var(--s-1);border-bottom:1px solid var(--c-line-ui)} .account-role{color:var(--accent-ink);font-weight:600} .btn--danger{background:var(--c-danger-line);border-color:var(--c-danger);box-shadow:none} .btn--danger:hover{background:var(--accent-dark);box-shadow:none} .account-page details.page-box > summary{display:flex;align-items:center;min-height:44px;font-family:var(--font-head);font-size:var(--fs-lg)} .points-box{border-color:var(--c-line);border-radius:var(--radius)} /* profil czytelnika: awatar w kolorach planszy */ .profile{border-color:var(--c-line);border-radius:var(--radius)} .profile__avatar{background:var(--c-blood-deep);color:var(--ink);border:1px solid var(--gold)} .profile__name{font-family:var(--font-head)} @media (max-width:767px){.grid-2col{grid-template-columns:1fr}.auth-box{padding:var(--s-3) var(--s-2)}} /* ===================================================================== POZOSTAŁE ELEMENTY (zadanie 3.16) - ujednolicenie z komponentami 3.5: ostre rogi (--radius), linie --c-line, tytuły krojem nagłówków, przyciski ≥ 44 px. ===================================================================== */ /* cykl tekstów */ .series-box,.series-head,.series-box__btn{border-radius:var(--radius);border-color:var(--c-line)} .series-box__pos{border-radius:var(--radius)} .series-head h1,.series-box__title{font-family:var(--font-head)} .series-list__no{border-radius:0;width:40px;height:40px;background:var(--accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} /* romb z planszy, numer prosto */ /* ranking i ramki przecieków */ .leak-src,.leak-item,.leak-box{border-radius:var(--radius);border-color:var(--c-line)} .leak-v{border-radius:var(--radius);font-family:var(--font-head);letter-spacing:.08em;text-transform:uppercase} .leak-bar{border-radius:0} /* komunikaty (flash) i ramki w treści (informacja, ostrzeżenie, wskazówka) */ .flash{font-size:var(--fs-base)} .kp-box{border-color:var(--c-line);border-left-width:3px} .kp-box__title{font-family:var(--font-head);font-weight:600;letter-spacing:.12em} /* dymki słowniczka */ .gl-tip{border-radius:var(--radius);box-shadow:0 12px 30px rgba(0,0,0,.6)} .gl-tip b{font-family:var(--font-head);font-size:var(--fs-lg)} /* baner cookies: ciemny pas ze złotą linią */ .cookie-banner{border-top:1px solid var(--gold);background:var(--c-bg-deep)} .cookie-btn{min-height:44px;border-radius:var(--radius);font-family:var(--font-head)} .cookie-btn--accept{border:1px solid var(--gold)} .cookie-btn--reject{border-color:var(--c-line-ui);background:transparent} /* okno galerii */ .lightbox__img{border-radius:0;border:1px solid var(--c-line)} .lightbox__btn,.lightbox__close{border-radius:var(--radius);border:1px solid var(--c-line-ui);min-width:44px;min-height:44px} /* „Posłuchaj”, obserwowanie, ocena, powiadomienia, relacja, kalendarz */ .listen__btn,.follow-btn,.live-jump,.launch__btn{border-radius:var(--radius);min-height:44px} .listen__stop{border-radius:var(--radius);width:44px;height:44px} .listen__rate select{border-radius:var(--radius)} .bell{border-radius:var(--radius)} .notif-list,.launch,.tool-hero,.tool-hero__search,.tldr,.live__new{border-radius:var(--radius)} .notif__ico{border-radius:0;width:36px;height:36px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .launch__date,.side-launches__date{border-radius:var(--radius)} .live-entry__body img{border-radius:0} /* krótki komunikat (toast): ciemny ze złotą obwódką zamiast jasnego */ .toast{background:var(--surface-2);color:var(--ink);border:1px solid var(--gold);border-radius:var(--radius)} /* ===================================================================== POPRAWKI PO PRZEGLĄDZIE SPÓJNOŚCI (zadanie 3.20) - odpowiedzi właściciela 13.10 ===================================================================== */ /* nagłówek na ilustracji (plansze home, hub, news, lore, mobile): na stronach z hero (.hero-top jako pierwszy element #main - inaczej układ zwykły) nagłówek wychodzi z przepływu i leży na obrazie. Przyciemnienie pod nim liczone na najgorszy przypadek (biały obraz): złoty napis paska wymaga ≥ 85% tła, złota aktywna pozycja menu ≥ 76%, więc 90% u góry → 80% na dole nagłówka, potem zanik. Tylko z JavaScriptem (bez niego menu telefonu to zwykła lista w nagłówku) i z :has(); wysokość nagłówka (--hdr-h) ustawia script.js. */ .js body:has(#main > .hero-top:first-child) .site-header{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:0} .js body:has(#main > .hero-top:first-child) .site-header::before{content:"";position:absolute;inset:0 0 -48px;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 90%,transparent) 0,color-mix(in srgb,var(--bg) 80%,transparent) calc(100% - 48px),transparent 100%)} .js body:has(#main > .hero-top:first-child) .wrap{padding-top:0} .js body:has(#main > .hero-top:first-child) .hero-top{padding-top:calc(var(--hdr-h,124px) + var(--s-4))} .js body:has(#main > .hero-top:first-child) .hero-top .home-hero__media,.js body:has(#main > .hero-top:first-child) .hero-top .page-head__media{left:0} /* obraz pod całym nagłówkiem */ /* telefon: tekst hero na ilustracji (plansza mobile 08/09) - obraz pod całym hero, przyciemnienie od dołu; tekst zaczyna się w ok. połowie wysokości, gdzie tło ma ≥ 85% (złota etykieta ≥ 4,5:1 także na jasnym obrazie) */ @media (max-width:767px){ .home-hero{align-items:flex-start;justify-content:flex-end;min-height:clamp(520px,140vw,640px);padding-bottom:var(--s-3)} .home-hero__media{position:absolute;inset:0;margin:0;aspect-ratio:auto} /* 3.22: przyciemnienie tylko pod tekstem (≥ 88% tła do 42% wysokości obrazu od dołu), wyżej obraz jasny */ .home-hero__media::before{background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 42%,color-mix(in srgb,var(--bg) 15%,transparent) 60%,transparent 72%)} .home-hero .media-caption{top:calc(var(--hdr-h,64px) + 52px);bottom:auto} /* pod przyciemnieniem nagłówka (48 px) */ .home-hero__title{text-shadow:0 2px 12px var(--c-black)} /* kadr na wędrowca (3.21): obraz w górnych 75% hero, przesunięty w prawo - postać obok tytułu jak na planszy mobile */ .home-hero:not(.hub-hero) .home-hero__media{bottom:25%} .home-hero:not(.hub-hero) .home-hero__media{overflow:hidden} .home-hero:not(.hub-hero) .home-hero__img{height:150%;object-position:62% 0} /* T.7: nowe hero - górne 2/3 obrazu (zamek i brama); wędrowiec z prawego dołu nie trafia pod tytuł */ } /* telefon: zakładki Centrum w jednym przewijanym rzędzie, aktywna podkreślona, strzałka „›” sygnalizuje dalsze zakładki (plansza mobile 09); przewijanie tylko wewnątrz paska, nie całej strony */ @media (max-width:767px){ .hub-tabs-nav{position:relative} .hub-tabs-nav::after{content:"›";position:absolute;top:0;right:0;bottom:1px;display:flex;align-items:center;justify-content:flex-end;width:44px;padding-right:4px; font-size:28px;color:var(--gold);pointer-events:none;background:linear-gradient(to right,transparent,var(--bg) 55%)} .game-page--hub .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-padding:0 44px 0 16px;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:none;padding:0 44px 0 0} .game-page--hub .tabs::-webkit-scrollbar{display:none} .game-page--hub .tabs li{flex:none} .game-page--hub .tabs a{padding:0 var(--s-2);background:none;border:0;box-shadow:none;border-bottom:2px solid transparent;border-radius:0} .game-page--hub .tabs a[aria-current]{background:none;color:var(--accent-ink);border-bottom-color:var(--gold);font-weight:600} .game-page--hub .tabs a:focus-visible{outline-offset:-2px} /* obwódka w środku - pasek przycina to, co wystaje */ } /* grubsze nagłówki jak na planszach (3.20): h1 i h2 (tytuły stron i sekcji) EB Garamond 700 zamiast 600 */ h1,h2{font-weight:700}