na stronie wpisu, * wiec kafle w siatce kurczyly sie do 70% komorki. */ width: auto; flex-basis: auto !important; padding: 0; margin: 0; max-height: none; color: #3b3a3a; } html body .mf-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-raised) !important; } /* * Kadr trzyma proporcje sam z siebie, a nie z obrazka w srodku. * Gdy zawartosc byla w normalnym przeplywie, kafle z obrazkiem ladowanym * leniwie mialy kadr o wysokosci 0 az do momentu wczytania - dzialal tylko * pierwszy kafel, bo jego obrazek leci priorytetowo. Bezwzgledne pozycjonowanie * dziecka usuwa te zaleznosc i przy okazji kasuje przeskok ukladu. */ .mf-card-media { position: relative; aspect-ratio: 16 / 9; background: #f2f2f2; overflow: hidden; flex: 0 0 auto; width: 100%; } .mf-card-media a { position: absolute; inset: 0; display: block; } .mf-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2, .6, .2, 1); } .mf-card:hover .mf-card-media img { transform: scale(1.05); } .mf-card-tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(20, 20, 20, .8); color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mf-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1 1 auto; } .mf-card-title { margin: 0; font-family: 'bold', sans-serif; font-size: 16px; line-height: 1.35; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mf-card-title a { color: #1d1d1d; text-decoration: none; } .mf-card:hover .mf-card-title a { color: var(--mf-accent); } .mf-card-excerpt { margin: 0; font-size: 14px; line-height: 1.55; color: #55595f; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mf-card-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid #f0f0f0; font-size: 12px; color: #62676d; font-variant-numeric: tabular-nums; } .mf-card--compact .mf-card-body { padding: 12px 14px 14px; } .mf-card--compact .mf-card-title { font-size: 15px; -webkit-line-clamp: 3; } /* ------------------------------------------------------------------ * * Wariant listy - boczna kolumna ("Informacje prasowe") * * To inna sekcja niz siatka kafli i musi wygladac inaczej. Pelna karta * z kadrem, obwodka i cieniem lezala tu w bialym pudelku sekcji, czyli * biala karta na bialej karcie, a w 288 px robilo sie po prostu ciasno. * Zamiast tego zwykla lista: mala miniatura z lewej, tytul i data z prawej, * pozycje rozdzielone wlosowa linia. * ------------------------------------------------------------------ */ html body .mf-card--list { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; background: none; border: 0; border-radius: 0; box-shadow: none !important; padding: 14px 0; margin: 0; height: auto; } html body .mf-card--list:hover { transform: none; box-shadow: none !important; } html body .mf-card--list + .mf-card--list { border-top: 1px solid #ececec; } .mf-card--list .mf-card-thumb { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #f2f2f2; } .mf-card--list .mf-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2, .6, .2, 1); } .mf-card--list:hover .mf-card-thumb img { transform: scale(1.06); } .mf-card--list .mf-card-body { padding: 0; gap: 4px; justify-content: flex-start; } .mf-card--list .mf-card-title { font-size: 14px; line-height: 1.35; -webkit-line-clamp: 3; } .mf-card--list .mf-card-meta { margin-top: 0; padding-top: 0; border-top: 0; font-size: 11px; } /* Pudelko sekcji w bocznej kolumnie: tekst do lewej, nie na srodek. */ html body .content-sidebar .sidebar-box { align-items: stretch; padding: 16px 16px 6px; } html body .content-sidebar .sidebar-box > h2 { margin: 0 0 6px; font-size: 16px; text-align: left; } html body .content-sidebar .post-feed { display: block; width: 100%; } .mf-empty { padding: 24px; color: #55595f; } @media (max-width: 1000px) { .mf-card-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .mf-card-grid, .mf-card-grid--4 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html body .mf-card, .mf-card-media img { transition: none; transform: none; } } /* ================================================================== * * JEDEN JEZYK POWIERZCHNI * * Przed ujednoliceniem kontenery mialy cztery rozne promienie (6, 7, 10, 12 px), * dwa rozne cienie i czesc z nich nie miala ani obwodki, ani cienia - przez co * jedne karty "unosily sie" nad tlem, a inne wtapialy sie w nie. * * Zamiast mocnych cieni: wlosowa obwodka, ktora rysuje krawedz karty, plus * bardzo miekki cien, ktory tylko odrywa ja od tla. Uniesienie zostaje wylacznie * tam, gdzie da sie kliknac - wtedy cien niesie informacje, a nie ozdobe. * * Selektory sa poprzedzone "body" tylko po to, zeby wygrac z regulami motywu * bez uzywania !important. * ================================================================== */ :root { --mf-surface: #ffffff; --mf-radius: 12px; --mf-radius-sm: 8px; --mf-hairline: rgba(23, 23, 23, .07); --mf-hairline-dark: rgba(255, 255, 255, .14); --mf-shadow: 0 1px 2px rgba(23, 23, 23, .04), 0 6px 18px rgba(23, 23, 23, .05); --mf-shadow-raised: 0 2px 6px rgba(23, 23, 23, .07), 0 14px 32px rgba(23, 23, 23, .10); } /* Powierzchnie jasne */ html body .article, html body .news-box, html body .sidebar-box, html body .mf-toc, html body .mf-poll, html body .similar-post, html body .content-box { background: var(--mf-surface); border: 1px solid var(--mf-hairline); border-radius: var(--mf-radius); box-shadow: var(--mf-shadow); } /* Uniesienie tylko tam, gdzie karta jest klikalna */ html body .news-box:hover, html body .similar-post:hover, html body .featured-box:hover { box-shadow: var(--mf-shadow-raised); } html body .mf-toc:hover, html body .mf-poll:hover, html body .article:hover, html body .sidebar-box:hover { box-shadow: var(--mf-shadow); } /* Powierzchnie ciemne i obrazkowe - ta sama geometria, obwodka rozjasniona */ html body .featured-box, html body .slides { border: 1px solid var(--mf-hairline-dark); border-radius: var(--mf-radius); box-shadow: var(--mf-shadow); overflow: hidden; } /* Ghost rysowal na kaflu druga, wewnetrzna ramke. Przy wlosowej obwodce to juz tylko szum, wiec ja wygaszamy. */ html body .featured-box:before { display: none; } /* Elementy wpuszczone w krawedz karty musza miec ten sam promien od gory */ html body .similar-post .similar-image, html body .news-box .post-card-image-link, html body .content-sidebar .post-card-image-link { border-radius: var(--mf-radius-sm); } html body .similar-post .similar-image { border-radius: calc(var(--mf-radius) - 1px) calc(var(--mf-radius) - 1px) 0 0; } /* Naglowek sekcji i plakietki - ten sam promien co karty */ html body .headbar-inner { border-radius: var(--mf-radius) var(--mf-radius) 0 0; } html body .ip-bar { border-radius: 0 0 var(--mf-radius-sm) 0; } html body .article-header .article-image, html body .slide-box .mySlides img { border-radius: var(--mf-radius-sm); } html body .slide-box .mySlides img { border-radius: 0; } /* Wewnetrzne odstepy karty artykulu - bez tego tresc dotyka obwodki */ html body .article { padding: 0 20px 24px; } html body .main-container article { padding-right: 20px; } @media (prefers-reduced-motion: reduce) { html body .news-box, html body .similar-post, html body .featured-box { transition: none; } } /* * Karta artykulu to element

, a screen.css wymusza na nim * "box-shadow: unset !important". To jedyne miejsce, gdzie musimy odpowiedziec * tym samym - inaczej glowna kolumna tresci jako jedyna nie ma cienia. */ html body article.article { box-shadow: var(--mf-shadow) !important; } /* ------------------------------------------------------------------ * * Paginacja * * screen.css daje cien karty na ".pagi div:first-child", ale ten element ma * zerowa wysokosc - efekt to smuga cienia na calej szerokosci tuz nad stopka, * bez zadnego widocznego pudelka. Cien zdejmujemy z pustego kontenera * i przenosimy na sama paginacje, ktora staje sie normalna karta. * ------------------------------------------------------------------ */ html body .pagi { margin: 6px auto 28px; } html body .pagi > div:first-child { box-shadow: none; background: none; border: 0; padding: 0; width: 100%; } html body .pagi .pagination { position: static; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 18px; background: var(--mf-surface); border: 1px solid var(--mf-hairline); border-radius: var(--mf-radius); box-shadow: var(--mf-shadow); font-size: 14px; } html body .pagi .page-number { color: var(--mf-ink-faint); font-size: 13px; } html body .pagi .pagination a { color: var(--mf-accent); text-decoration: none; font-family: var(--mf-font-bold); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 8px; transition: background .15s ease; } html body .pagi .pagination a:hover { background: var(--mf-accent-soft); } /* Gdy jest tylko jeden kierunek, licznik zostaje na srodku. */ html body .pagi .pagination .newer-posts { order: 1; } html body .pagi .pagination .page-number { order: 2; margin: 0 auto; } html body .pagi .pagination .older-posts { order: 3; } /* ------------------------------------------------------------------ * * Bez kafla w kaflu * * Pudelko sekcji w bocznej kolumnie samo jest juz karta. Komponent, ktory * do niego wchodzi, nie moze przynosic drugiego tla, obwodki i cienia - * wychodzi z tego biala ramka w bialej ramce. Chrome nalezy do pudelka * sekcji, zawartosc jest plaska. * ------------------------------------------------------------------ */ html body .sidebar-box .mf-poll, html body .content-box .mf-poll { background: none; border: 0; border-radius: 0; box-shadow: none !important; padding: 0; } html body .sidebar-box.poll { padding: 18px 16px 16px; align-items: stretch; } /* "Nasze serie": pozycje to linki, a nie osobne karty. */ html body .content-box .insider-box { display: block; border: 0; background: var(--mf-accent-soft); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; color: var(--mf-accent); text-decoration: none; text-align: left; line-height: 1.4; box-shadow: none; transition: background .15s ease, color .15s ease; } html body .content-box .insider-box:hover { background: var(--mf-accent); color: #fff; } html body .content-box { align-items: stretch; padding: 18px 16px 10px; } html body .content-box h3 { margin: 0 0 12px; text-align: left; font-size: 16px; } /* ================================================================== * * NAGLOWEK I MENU * * Geometria zostaje taka jak byla (wysokosc 96 px, te same odstepy), * zmienia sie zachowanie i jezyk wizualny: naglowek zostaje na wierzchu * przy przewijaniu, aktywna pozycja ma podkreslenie w kolorze marki, * a najechanie daje delikatne zielone tlo zamiast szarej plamy. * ================================================================== */ /* * screen.css ma regule ".post-template header, .post-template footer { margin-top: 20px }" * pisana pod naglowek artykulu, ale trafia w KAZDY

na stronie wpisu, * czyli tez w naglowek serwisu. Przy naglowku przyklejonym te 20 px odsuwa go * od krawedzi okna i miedzy nim a gora ekranu robi sie dziura. * Naglowek serwisu ma wygladac tak samo na kazdym typie strony. */ html body #site-header { margin-top: 0; padding: 15px 25px; width: 100%; box-sizing: border-box; text-align: initial; } @media (min-width: 768px) { html body #site-header { position: sticky; top: 0; z-index: 500; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; } html body #site-header.is-stuck { border-bottom-color: var(--mf-hairline); box-shadow: 0 6px 20px rgba(23, 23, 23, .07); } } /* Menu zwija sie na waskich ekranach - tam naglowek zostaje w przeplywie. */ .mf-header-sentinel { height: 1px; margin-bottom: -1px; } html body #site-header nav ul.nav a { position: relative; border-radius: 10px; letter-spacing: .03em; transition: color .15s ease, background .15s ease; } /* Podkreslenie wjezdza od lewej, bez zmiany wysokosci naglowka. */ html body #site-header nav ul.nav a:after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 12px; height: 2px; border-radius: 2px; background: var(--mf-accent); transform: scaleX(0); transform-origin: left center; transition: transform .22s cubic-bezier(.2, .6, .2, 1); } html body #site-header nav ul.nav a:hover, html body #site-header nav ul.nav a:focus-visible { background: var(--mf-accent-soft); color: var(--mf-accent); } html body #site-header nav ul.nav a:hover:after, html body #site-header nav ul.nav li.nav-current > a:after { transform: scaleX(1); } html body #site-header nav ul.nav li.nav-current > a { color: var(--mf-accent); } /* Wyszukiwarka w menu: ikona plus etykieta */ html body .mf-nav-search a { display: flex; align-items: center; gap: 7px; } html body .mf-nav-search svg { flex: 0 0 auto; } html body .mf-nav-search a:after { display: none; } @media (prefers-reduced-motion: reduce) { html body #site-header nav ul.nav a:after { transition: none; } } /* ------------------------------------------------------------------ * * Nakladka wyszukiwania * ------------------------------------------------------------------ */ /* * UWAGA: "display: flex" unieważnia atrybut hidden (regula UA to [hidden]{display:none} * o niskiej specyficznosci). Bez ponizszej reguly zamknieta nakladka byla * przezroczysta, ale rozciagnieta na cale okno - i przechwytywala KAZDE * klikniecie na stronie. Regula [hidden] musi zostac. */ .mf-search[hidden] { display: none !important; pointer-events: none; } .mf-search { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; } .mf-search-backdrop { position: absolute; inset: 0; background: rgba(20, 22, 20, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; } .mf-search-panel { position: relative; width: 100%; max-width: 620px; background: var(--mf-surface); border: 1px solid var(--mf-hairline); border-radius: 16px; box-shadow: 0 20px 60px rgba(20, 22, 20, .28); padding: 18px 18px 14px; opacity: 0; transform: translateY(-10px) scale(.985); transition: opacity .18s ease, transform .18s cubic-bezier(.2, .6, .2, 1); } .mf-search.is-open .mf-search-backdrop { opacity: 1; } .mf-search.is-open .mf-search-panel { opacity: 1; transform: none; } .mf-search form { display: flex; align-items: center; gap: 10px; } .mf-search-icon { flex: 0 0 auto; color: var(--mf-accent); } .mf-search input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; outline: none; font: inherit; font-size: 17px; padding: 10px 4px; background: none; color: var(--mf-ink); } .mf-search input[type="search"]::placeholder { color: #8d9298; } .mf-search-submit { flex: 0 0 auto; border: 0; border-radius: 10px; background: var(--mf-accent); color: #fff; font: inherit; font-family: var(--mf-font-bold); font-weight: 700; font-size: 14px; padding: 10px 16px; cursor: pointer; transition: background .15s ease; } .mf-search-submit:hover { background: var(--mf-accent-strong); } .mf-search-close { flex: 0 0 auto; border: 0; background: none; color: #6b6b6b; cursor: pointer; padding: 8px; border-radius: 8px; line-height: 0; } .mf-search-close:hover { background: #f0f0f0; color: var(--mf-ink); } .mf-search-hint { margin: 10px 2px 0; font-size: 12px; color: var(--mf-ink-faint); } .mf-search-hint kbd { font: inherit; background: #f2f3f4; border: 1px solid #e2e4e6; border-radius: 5px; padding: 1px 6px; } /* Tlo nie przewija sie, gdy nakladka jest otwarta. */ html.mf-search-open body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .mf-search-panel, .mf-search-backdrop { transition: none; } } /* ------------------------------------------------------------------ * * Stopka: linki do dokumentow formalnych * * screen.css daje ".powered" uklad "space-between" pod dwoje dzieci. * Trzecie dziecko wchodzi w srodek, a przy waskim ekranie caly pasek * zawija sie zamiast sciskac napisy do nieczytelnosci. * ------------------------------------------------------------------ */ html body .powered { flex-wrap: wrap; gap: 12px 24px; align-items: center; } html body .mf-footer-docs { display: flex; gap: 18px; flex-wrap: wrap; } html body .mf-footer-docs a { color: var(--mf-ink-faint); text-decoration: none; font-size: 12px; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; } html body .mf-footer-docs a:hover, html body .mf-footer-docs a:focus-visible { color: var(--mf-accent); border-bottom-color: currentColor; } /* ------------------------------------------------------------------ * * Dokumenty prawne (regulamin, polityka prywatnosci) * * Kreator oddaje dokument jako tabele w obcej kolorystyce (granat, czarne * ramki, Arial). Tresc zostaje co do slowa, ale warstwa wizualna jest nasza: * te same karty, ta sama zielen, ta sama typografia co reszta serwisu. * * Uklad sekcji: pudelko sekcji ma naglowek z ikona, zawartosc lezy plasko - * zadnej karty w karcie. * ------------------------------------------------------------------ */ html body .mf-doc { font-family: var(--mf-font); color: var(--mf-ink); font-size: 16px; line-height: 1.7; /* * Bez bocznej kolumny artykul ma 1200 px, a wiersz tekstu tej dlugosci * czyta sie zle. Dokument dostaje wiec wlasna miare i stoi na srodku - * tabele i tak maja o 30% wiecej miejsca niz przed zdjeciem sidebara. */ max-width: 980px; margin: 0 auto; } /* Naglowek dokumentu */ html body .mf-doc-head { text-align: center; padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--mf-hairline); } html body .mf-doc-kicker { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-accent); } html body .mf-doc-title { font-family: var(--mf-font-bold); font-size: 26px; line-height: 1.25; margin: 0 0 10px; color: var(--mf-ink); } html body .mf-doc-date { margin: 0; font-size: 13px; color: var(--mf-ink-faint); } /* Sekcja */ html body .mf-doc-sec { background: var(--mf-surface); border: 1px solid var(--mf-hairline); border-radius: var(--mf-radius); box-shadow: var(--mf-shadow); margin: 0 0 20px; overflow: hidden; } html body .mf-doc-sec-head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 22px; background: var(--mf-accent-soft); border-bottom: 1px solid var(--mf-accent-line); font-family: var(--mf-font-bold); font-size: 16px; line-height: 1.3; color: var(--mf-accent-strong); text-transform: none; } html body .mf-doc-ico { flex: 0 0 auto; display: inline-flex; color: var(--mf-accent); } html body .mf-doc-ico svg { width: 22px; height: 22px; display: block; } html body .mf-doc-sec-body { padding: 6px 22px 20px; } html body .mf-doc-sec-body p, html body .mf-doc-sec-body li { font-size: 15px; line-height: 1.7; } html body .mf-doc-sec-body > p:first-child { margin-top: 14px; } html body .mf-doc-sec-body h4 { font-family: var(--mf-font-bold); font-size: 15px; margin: 26px 0 10px; color: var(--mf-ink); } html body .mf-doc-sec-body ul { padding-left: 20px; } html body .mf-doc-sec-body a { color: var(--mf-accent); text-decoration: underline; text-underline-offset: 2px; } html body .mf-doc-note { font-size: 13px; color: var(--mf-ink-faint); margin-top: 8px; } /* Tabele wewnatrz dokumentu */ html body .mf-doc-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--mf-hairline); border-radius: var(--mf-radius-sm); overflow: hidden; margin: 0 0 6px; font-size: 14px; line-height: 1.6; } html body .mf-doc-table th { background: var(--mf-accent-soft); color: var(--mf-accent-strong); font-family: var(--mf-font-bold); font-weight: 700; text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--mf-hairline); } html body .mf-doc-table td { background: var(--mf-surface); padding: 11px 14px; vertical-align: top; border-bottom: 1px solid var(--mf-hairline); } html body .mf-doc-table--2 td { width: 50%; } html body .mf-doc-table--2 td + td { border-left: 1px solid var(--mf-hairline); } html body .mf-doc-table--dane td + td { border-left: 1px solid var(--mf-hairline); } html body .mf-doc-table--dane th + th { border-left: 1px solid var(--mf-hairline); } html body .mf-doc-table tr:last-child td, html body .mf-doc-table tr:last-child th { border-bottom: 0; } /* Stopka dokumentu z numerem licencji */ html body .mf-doc-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--mf-hairline); text-align: center; } html body .mf-doc-foot p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--mf-ink-faint); } html body .mf-doc-foot a { color: inherit; } /* * Strona dokumentu: bez bocznej kolumny, bez metryki autora i bez * "Podobnych artykulow" - to dokument, nie wpis. Tresc bierze cala szerokosc. */ html body .main-container.mf-doc-page { display: block; } html body .mf-doc-page .article { width: 100%; max-width: 100%; } html body .mf-doc-page .gh-content { max-width: 100%; } /* * screen.css robi z

kolumnowy flex, wiec artykul bierze szerokosc * z najszerszego dziecka. Tabela o sztywnych kolumnach rozpychala przez to * caly uklad poza ekran telefonu, a strona i tak nie przewijala sie w poziomie. */ html body article.article { max-width: 100%; } html body .gh-content { overflow-x: auto; } @media (max-width: 767px) { html body .mf-doc-sec-head { padding: 14px 16px; font-size: 15px; } html body .mf-doc-sec-body { padding: 4px 16px 16px; } html body .mf-doc-title { font-size: 21px; } /* Dwukolumnowe warianty odpowiedzi staja jeden pod drugim. */ html body .mf-doc-table--2, html body .mf-doc-table--2 tbody, html body .mf-doc-table--2 tr, html body .mf-doc-table--2 td, html body .mf-doc-table--2 th { display: block; width: auto; } html body .mf-doc-table--2 td + td { border-left: 0; } /* Tabela danych zostaje tabela, ale dostaje wlasny pasek przewijania. */ html body .mf-doc-table--dane { display: block; overflow-x: auto; } }