/* ============================================================================ REDESIGN.CSS — modernizacja wizualna bloga JSystems (2026) ---------------------------------------------------------------------------- Cel: nowoczesny, korporacyjny, lekki ale bogaty wizualnie wygląd. Warstwa nakładkowa (ładowana JAKO OSTATNIA) — nie modyfikuje plików .min. ZASADA BEZWZGLĘDNA: ten arkusz NIE dotyka w żaden sposób wyświetlania TREŚCI artykułów. Żaden selektor nie celuje w `.post__text` ani `#post-content` ani ich potomków. Modernizujemy wyłącznie OBUDOWĘ: nagłówek, hero, karty listy postów, sidebar, stopkę, paginację, wyszukiwarkę, formularze i strony autorów. Specyfika kaskady: stare style używają długich łańcuchów klas (np. `.wrapper .wrapper__content .posts .posts__post` = 4 klasy) oraz na stronie artykułu doładowują zewnętrzny blog.css w . Dlatego override'y mają prefiks `body`/pełne łańcuchy i punktowe `!important`, by pewnie wygrywać kaskadę bez walki ze specyficznością. ============================================================================ */ :root { /* Marka (kotwiczymy na #b21515 z logo, dokładamy odcienie) */ --brand: #b21515; --brand-700: #8f1011; --brand-800: #6f0c0d; --brand-bright: #e02d33; --brand-tint: #fbecec; --brand-tint-2: #f4d9d9; /* Neutralne — fundament „korporacyjnego" spokoju */ --ink: #14171c; --text: #353b43; --muted: #6a727c; --faint: #9aa1ab; --line: #e8eaee; --line-2: #d9dde3; --bg: #ffffff; --bg-soft: #f6f7f9; --bg-sunken: #eef0f3; /* Cienie — neutralne, miękkie (NIE czerwone glow) */ --shadow-xs: 0 1px 2px rgba(20,23,28,.06); --shadow-sm: 0 2px 8px rgba(20,23,28,.06), 0 1px 2px rgba(20,23,28,.04); --shadow-md: 0 10px 28px rgba(20,23,28,.09), 0 2px 6px rgba(20,23,28,.05); --shadow-lg: 0 20px 48px rgba(20,23,28,.13); --r-lg: 16px; --r-md: 12px; --r-sm: 8px; --r-pill: 999px; --ease: cubic-bezier(.4, 0, .2, 1); } /* Drobny szlif renderowania (nie zmienia układu treści) */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Sticky masthead nie może zasłaniać kotwic (TOC w artykułach skacze pod nagłówek). To wpływa wyłącznie na pozycję docelową scrolla, NIE na render treści. */ html { scroll-padding-top: 88px; } /* ============================================================================ 1. MASTHEAD — nagłówek (.hero) ============================================================================ */ body .hero { position: sticky; top: 0; max-width: none; width: 100%; height: auto; min-height: 66px; margin: 0; padding: 11px 28px; background: #ffffff; border-top: 3px solid var(--brand); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-xs); z-index: 50; } /* Półprzezroczysty „blur" tylko od desktopu. NIE na mobile — tam .navigation--active jest position:fixed wewnątrz .hero; backdrop-filter zrobiłby z .hero blok zawierający i pełnoekranowe menu zapadłoby się do paska nagłówka (gotcha containing-block). */ @media screen and (min-width: 768px) { body .hero { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); } } body .hero__link img, body .hero__logo { height: 44px; width: auto; } @media screen and (min-width: 768px) { body .navigation__list { display: flex; align-items: center; margin: 0; } body .navigation__item { margin: 0 4px; } body .navigation__link { position: relative; font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: .005em; padding: 9px 14px; border-radius: var(--r-sm); transition: color .2s var(--ease), background .2s var(--ease); } body .navigation__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } body .navigation__link:hover { color: var(--brand); } body .navigation__link:hover::after { transform: scaleX(1); } /* Ostatni link („Szkolenia") jako primary CTA do strony głównej JSystems */ body .navigation__item:last-child { margin-left: 12px; } body .navigation__item:last-child .navigation__link { background: var(--brand); color: #fff; padding: 9px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-xs); } body .navigation__item:last-child .navigation__link:hover { background: var(--brand-700); color: #fff; } body .navigation__item:last-child .navigation__link::after { display: none; } } /* ============================================================================ 2. HERO / pasek wyszukiwania (.main) - usuwamy zdjęcie biurka i zdublowane logo - lekki, korporacyjny gradient + nowoczesna wyszukiwarka (pill) ============================================================================ */ body .main { width: 100%; min-height: 360px !important; padding: 48px 24px !important; /* Przywrócone tło-flatlay (Andrzej lubi) + miękka biała poświata pod tekstem dla czytelności i lekkości. Zdjęcie widoczne na obrzeżach. */ background: radial-gradient(ellipse 60% 70% at 50% 48%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, .12) 100%), url("../img/background.jpg") center / cover no-repeat !important; border-bottom: 1px solid var(--line); } /* zdublowane logo w hero — chowamy, masthead ma już logo */ body .main .main__logoLink, body .main .main_logo { display: none !important; } body .main .main__h1 { max-width: 760px; margin: 0 auto 24px !important; font-size: 31px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-align: center; } /* Eyebrow nad hasłem — sygnalizuje tematykę bloga */ body .main .main__h1::before { content: "AI · DevOps · Cybersecurity · Programowanie · Bazy danych"; display: block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; color: var(--brand); } /* Wyszukiwarka — pill z ikoną lupy i czystym przyciskiem */ body .main .main__wrapper { max-width: 580px; width: 100%; margin: 0 auto !important; background: #fff !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-pill) !important; box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } body .main .main__wrapper:focus-within { border-color: var(--brand) !important; box-shadow: 0 0 0 4px var(--brand-tint); } body .main .main__wrapper .wrapper__input { flex: 1; min-width: 0 !important; margin: 0 !important; padding: 15px 18px 15px 48px !important; font-size: 15px !important; color: var(--ink) !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236a727c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 18px center !important; } body .main .main__wrapper .wrapper__submit { margin: 0 !important; padding: 15px 28px !important; border: none !important; border-left: none !important; border-radius: 0 !important; background: var(--brand) !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .01em; transition: background .2s var(--ease); } body .main .main__wrapper .wrapper__submit:hover { background: var(--brand-700) !important; color: #fff !important; } /* ============================================================================ 3. LISTA POSTÓW — karty (.posts / .posts__post) Dotyczy strony głównej i list kategorii (NIE treści artykułu). ============================================================================ */ body .wrapper .wrapper__content .posts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; width: 100%; padding: 36px 12px !important; } /* nagłówek listy + baner newslettera rozpinają się na całą szerokość siatki */ body .wrapper .wrapper__content .posts .posts__title, body .posts__newsletter-banner { grid-column: 1 / -1; } body .wrapper .wrapper__content .posts .posts__title { margin: 6px 0 4px !important; padding: 0 0 14px !important; text-align: left !important; color: var(--ink) !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.01em; position: relative; } body .wrapper .wrapper__content .posts .posts__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px; background: var(--brand); border-radius: 2px; } /* Karta */ body .wrapper .wrapper__content .posts .posts__post { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); } body .wrapper .wrapper__content .posts .posts__post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) !important; border-color: var(--line-2); } /* miniatura — pełna szerokość u góry karty */ body .wrapper .wrapper__content .posts .posts__post .post__img { width: 100%; height: 190px !important; border-radius: 0 !important; order: 0; } /* kolejność: kategoria (eyebrow) -> tytuł -> data -> autorzy -> przyciski */ body .posts .posts__post .post__category { order: 1; } body .posts .posts__post .post__title { order: 2; } body .posts .posts__post .post__date { order: 3; } body .posts .posts__post .post__author { order: 4; } body .posts .posts__post .post__buttons { order: 5; } body .wrapper .wrapper__content .posts .posts__post .post__category { margin: 0 !important; padding: 15px 18px 0 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--brand) !important; } body .posts .posts__post .post__category a { color: var(--brand) !important; } body .wrapper .wrapper__content .posts .posts__post .post__title { margin: 0 !important; padding: 7px 18px 0 !important; font-size: 18.5px !important; font-weight: 700 !important; line-height: 1.34 !important; color: var(--ink) !important; letter-spacing: -.01em; transition: color .2s var(--ease); } body .posts .posts__post .post__title:hover { color: var(--brand) !important; } body .posts .posts__post .post__date { margin: 0 !important; padding: 9px 18px 0 !important; justify-content: flex-start !important; color: var(--muted) !important; font-size: 13px !important; font-weight: 500 !important; } /* autorzy — kompaktowe awatary BEZ czerwonego glow */ body .posts .posts__post .post__author { margin: 0 !important; padding: 8px 18px 0 !important; justify-content: flex-start !important; color: var(--muted) !important; font-size: 12.5px !important; font-weight: 500 !important; } body .posts .post__authorImage, body .posts .post__authorImage_second { width: 30px !important; height: 30px !important; margin: 0 9px 0 0 !important; border: 2px solid #fff !important; outline: 1px solid var(--line-2); box-shadow: none !important; } body .posts .posts__post .post__author a { color: var(--text) !important; } body .posts .posts__post .post__author a .black { color: var(--ink) !important; font-weight: 600; } /* pasek akcji */ body .posts .posts__post .post__buttons { order: 5; margin-top: auto !important; padding: 16px 18px 18px !important; display: grid !important; grid-template-columns: 1fr auto auto !important; grid-template-rows: auto !important; align-items: center; gap: 10px !important; } /* kasujemy dziwne offsety z oryginału */ body .posts .post__buttons > :nth-child(2), body .posts .post__buttons > :nth-child(3) { position: static !important; top: 0 !important; left: 0 !important; } body .wrapper .wrapper__content .posts .posts__post .post__more { display: inline-flex; align-items: center; gap: 7px; margin: 0 !important; padding: 9px 17px !important; border: 1px solid var(--brand) !important; border-radius: var(--r-pill) !important; color: var(--brand) !important; font-size: 13px !important; font-weight: 600 !important; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } body .posts .posts__post .post__more::after { content: "→"; font-size: 14px; line-height: 1; } body .wrapper .wrapper__content .posts .posts__post .post__more:hover { background: var(--brand) !important; color: #fff !important; box-shadow: var(--shadow-sm); } /* ikona komentarzy — czysty kwadrat zamiast „dymka z ogonkiem" */ body #comment-icon { position: relative !important; width: 40px !important; height: 34px !important; border: 1px solid var(--line-2) !important; border-radius: 9px !important; background: var(--bg-soft) !important; transition: background .2s var(--ease), border-color .2s var(--ease); } body #comment-icon::after { content: none !important; } body #comment-icon .dot { width: 4px !important; height: 4px !important; background: var(--muted) !important; } body #comment-icon:hover { background: var(--brand) !important; border-color: var(--brand) !important; } body #comment-icon:hover .dot { background: #fff !important; } body .comment-count__badge { background: var(--bg-sunken) !important; color: var(--muted) !important; border-radius: var(--r-pill); padding: 4px 11px; font-size: 12px; font-weight: 600; } /* baner newslettera w liście postów */ body .posts__newsletter-banner { margin: 4px 0 !important; padding: 18px 22px !important; background: linear-gradient(135deg, #ffffff 0%, #fbf0f0 100%) !important; border: 1px solid var(--brand-tint-2) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-xs); } body .newsletter-banner__text { color: var(--text) !important; } body .newsletter-banner__text strong { color: var(--ink); } body .newsletter-banner__btn { background: var(--brand) !important; border-radius: var(--r-pill) !important; padding: 11px 20px !important; box-shadow: var(--shadow-xs); transition: background .2s var(--ease); } body .newsletter-banner__btn:hover { background: var(--brand-700) !important; } /* ============================================================================ 4. SIDEBAR — nawigacja kategorii (.category__nav) ============================================================================ */ body .wrapper .category__nav .nav__categories { align-items: stretch !important; width: 100%; background: #fff; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm); overflow: hidden; padding: 6px 0; } /* nagłówki sekcji (Kursy / Wszystkie kategorie / Autorzy / Newsletter) — zamiast krzykliwych czerwonych pasków: subtelne nagłówki z akcentem marki */ body .wrapper .category__nav .nav__categories .categories__category--big { background: #fff !important; color: var(--ink) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; padding: 16px 18px 8px !important; border: none !important; } body .category__nav .nav__categories .categories__category--big::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--brand); vertical-align: middle; } body .wrapper .category__nav .nav__categories .categories__category--big:hover { background: #fff !important; color: var(--brand) !important; } /* kategorie (linki z licznikiem) */ body .wrapper .category__nav .nav__categories .categories__category--small { color: var(--text) !important; font-size: 14.5px !important; font-weight: 500 !important; padding: 9px 18px !important; transition: background .18s var(--ease), color .18s var(--ease); } body .wrapper .category__nav .nav__categories .categories__category--small:hover { background: var(--brand-tint) !important; color: var(--brand) !important; } /* podkategorie / linki kursów — wyraźniejsze wcięcie poziomu zagnieżdżenia + pionowa linia-prowadnica, by hierarchia (kategoria → podkategoria, kurs → lekcje) była czytelna na pierwszy rzut oka */ body .wrapper .category__nav .nav__cat { margin: 2px 0 14px !important; padding: 2px 14px 4px 32px !important; position: relative; } body .wrapper .category__nav .nav__cat::before { content: ""; position: absolute; left: 22px; top: 3px; bottom: 10px; width: 2px; background: var(--line-2); border-radius: 2px; } body .wrapper .category__nav .nav__cat .cat__link { width: 100%; margin: 1px 0 !important; padding: 8px 12px !important; border-radius: var(--r-sm); color: var(--muted) !important; font-size: 13.5px !important; font-weight: 500 !important; border-bottom: none !important; transition: background .18s var(--ease), color .18s var(--ease); } body .wrapper .category__nav .nav__cat .cat__link:hover { background: var(--brand-tint) !important; color: var(--brand) !important; } /* liczniki — neutralne „pill" zamiast czerwieni */ body .category__nav .cat__count { float: right; opacity: 1 !important; background: var(--bg-sunken); color: var(--muted) !important; border-radius: var(--r-pill); padding: 1px 9px; font-size: 12px !important; font-weight: 600; } body .category__nav .categories__category--small .cat__count, body .category__nav .cat__link .cat__count { color: var(--muted) !important; } /* promo newslettera w sidebarze — elegancka karta zamiast surowego paska */ body .category-top { margin: 12px 12px 6px !important; padding: 20px 18px !important; gap: 14px !important; background: linear-gradient(165deg, #ffffff 0%, #fbf0f0 100%); border: 1px solid var(--brand-tint-2); border-bottom: 1px solid var(--brand-tint-2) !important; border-radius: var(--r-md); } body .category-top__img { width: 58% !important; max-width: 124px !important; } body .category-top__p1 { font-size: 13.5px !important; line-height: 1.55; color: var(--text) !important; } body .category-top__link { background: var(--brand) !important; border: none !important; border-radius: var(--r-pill) !important; padding: 11px 20px !important; font-weight: 600; box-shadow: var(--shadow-xs); transition: background .2s var(--ease); } body .category-top__link:hover { background: var(--brand-700) !important; color: #fff !important; } /* ============================================================================ 5. STOPKA (.footer) ============================================================================ */ body .footer { flex-direction: row; flex-wrap: wrap; gap: 18px 32px; max-width: none !important; width: 100%; margin: 56px 0 0 !important; padding: 34px 40px !important; background: var(--bg-soft); border-top: 1px solid var(--line); justify-content: space-between; align-items: center; } body .footer__brand { display: flex; align-items: center; gap: 16px; } body .footer__logo { height: 30px; width: auto; margin: 0 !important; opacity: .92; } body .footer__tagline { margin: 0; max-width: 320px; color: var(--muted); font-size: 12.5px; line-height: 1.5; } body .footer__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } body .footer__nav a { color: var(--text); font-size: 13.5px; font-weight: 500; transition: color .2s var(--ease); } body .footer__nav a:hover { color: var(--brand); } body .footer__copyright { margin: 0 !important; color: var(--faint) !important; font-size: 12.5px !important; } /* dawny pojedynczy link „Polityka prywatności" (gdy stary markup) */ body .footer > a { color: var(--text); font-weight: 500; } body .footer > a:hover { color: var(--brand); } /* ============================================================================ 6. PAGINACJA Markup: .pagination > .step-links > [a.prev] + .current(a / span.active / span.ellipsis) + [a.next]. Numery = pigułki, aktualna = marka, prev/next = ciemne przyciski. Szablony pokazują okno stron z wielokropkiem. ============================================================================ */ body .pagination { display: flex; justify-content: center; width: 100%; padding: 34px 12px 14px; } body .pagination .step-links, body .pagination .current { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; } /* numery stron */ body .pagination .current a, body .pagination .current .active { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 11px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none !important; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } body .pagination .current a { color: var(--text) !important; background: #fff; border: 1px solid var(--line-2); } body .pagination .current a:hover { border-color: var(--brand); color: var(--brand) !important; background: var(--brand-tint); } body .pagination .current .active { background: var(--brand); color: #fff !important; border: 1px solid var(--brand); box-shadow: var(--shadow-xs); } body .pagination .current .ellipsis { display: inline-flex; align-items: flex-end; justify-content: center; min-width: 26px; height: 40px; padding-bottom: 9px; color: var(--faint); font-weight: 700; user-select: none; } /* prev / next */ body .pagination .step-links > a { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: var(--r-pill); background: var(--ink); color: #fff !important; border: 1px solid var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } body .pagination .step-links > a:hover { background: var(--brand); border-color: var(--brand); color: #fff !important; transform: translateY(-1px); } /* ============================================================================ 7. BACK-TO-TOP ============================================================================ */ body #back-to-top { width: 46px; height: 46px; background: var(--ink) !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: var(--shadow-md) !important; font-size: 1.2rem; transition: background .2s var(--ease), transform .2s var(--ease); } body #back-to-top:hover { background: var(--brand) !important; transform: translateY(-2px); } /* Toast „Link skopiowany!" — globalnie ukryty (reguła display:none żyła tylko w show_post.css, więc na stronie głównej/listach pokazywał się jako tekst u dołu). JS na artykułach pokazuje go inline (style.display='block'), co nadpisuje tę regułę. */ body .copy-link-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); display: none; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 20px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; box-shadow: var(--shadow-md); } /* ============================================================================ 8. FORMULARZE (obudowa — newsletter, autorzy, komentarze) Wykluczamy pole wyszukiwarki (ma własny styl). ============================================================================ */ body input[type="text"]:not(.wrapper__input), body input[type="email"], body input[type="password"], body input[type="search"], body textarea { background: #fff !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-sm) !important; padding: 11px 14px !important; font-size: 14px !important; color: var(--text) !important; } body input[type="text"]:not(.wrapper__input):focus, body input[type="email"]:focus, body input[type="password"]:focus, body input[type="search"]:focus, body textarea:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-tint) !important; } body input[type="submit"] { background: var(--brand) !important; color: #fff !important; border: none !important; border-radius: var(--r-pill) !important; padding: 12px 26px !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; cursor: pointer; transition: background .2s var(--ease); } body input[type="submit"]:hover { background: var(--brand-700) !important; } /* ============================================================================ 9. STRONY AUTORÓW — neutralizacja czerwonego glow, spójne karty ============================================================================ */ body .author { border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm) !important; } body .author__top img { border: 4px solid #fff !important; outline: 1px solid var(--line-2); box-shadow: var(--shadow-md) !important; } body .author__top .publications { background: var(--brand) !important; box-shadow: var(--shadow-sm); } body .author__link { border: 1px solid var(--brand) !important; border-radius: var(--r-pill) !important; font-weight: 600; transition: background .2s var(--ease), color .2s var(--ease); } body .author__link:hover { background: var(--brand) !important; color: #fff !important; } body .content__authorPhoto { border: 3px solid #fff !important; outline: 1px solid var(--line-2); box-shadow: var(--shadow-sm) !important; } /* ============================================================================ 10. POPUP NEWSLETTERA (Kit.com embed — szlifujemy kontener i przycisk zamknięcia; wewnętrzny formularz to embed konfigurowany w panelu Kit.com) ============================================================================ */ body .formPopup { background: rgba(20, 23, 28, .62) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } body .formPopup .seva-form { border-radius: 14px !important; overflow: hidden; box-shadow: var(--shadow-lg); } body .formPopup__close { position: fixed !important; top: 22px; right: 22px; margin: 0 !important; width: 40px !important; height: 40px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: #fff !important; color: var(--ink) !important; font-size: 15px !important; font-weight: 600; box-shadow: var(--shadow-md); z-index: 100000; } body .formPopup__close:hover { background: var(--bg-sunken) !important; opacity: 1 !important; } /* ============================================================================ 11. FIX POSTERA ARTYKUŁU NA MOBILE (na życzenie) Problem: autor + data (overlay .post__info, position:absolute bottom) nachodziły na tekst wtopiony w grafikę postera (np. „Konteneryzacja, CI/CD..."). Rozwiązanie: na mobile wyciągamy pasek meta spod obrazka i renderujemy go jako czysty, ciemny pasek POD posterem — zero nachodzenia. (Tylko obudowa nagłówka artykułu — NIE dotyka treści .post__text.) ============================================================================ */ @media (max-width: 950px) { body .content__poster { display: flex !important; flex-direction: column !important; } body .content__poster .poster__img { order: 1; } body .content__poster .poster__filter { position: static !important; order: 2; width: 100% !important; height: auto !important; background: var(--ink) !important; } body .content__poster .post__info { position: static !important; width: 100% !important; margin: 0 !important; padding: 12px 16px !important; background: none !important; border-radius: 0 !important; gap: 14px; } body .content__poster .post__info .info__data { color: #fff !important; text-shadow: none !important; } } /* ============================================================================ 12. RESPONSYWNOŚĆ ============================================================================ */ @media screen and (max-width: 1100px) { body .wrapper .wrapper__content .posts { display: flex !important; flex-direction: column; align-items: center; gap: 18px; } body .wrapper .wrapper__content .posts .posts__post { width: 96% !important; max-width: 520px !important; } body .posts__newsletter-banner { width: 96%; max-width: 520px; } } @media screen and (max-width: 767px) { body .hero { padding: 10px 18px; } body .main { min-height: 280px !important; padding: 40px 18px !important; } body .main .main__h1 { font-size: 23px; } body .main .main__h1::before { font-size: 10.5px; letter-spacing: .1em; margin-bottom: 12px; } body .footer { flex-direction: column; text-align: center; gap: 16px; padding: 30px 20px !important; } body .footer__brand { flex-direction: column; text-align: center; } body .footer__tagline { max-width: none; } body .footer__nav { justify-content: center; } }