/* ============================================================ EkoStempel - wspólne style responsywne (tablet + telefon) Ładowane na końcu na każdej podstronie, nadpisuje style inline. ============================================================ */ html, body { max-width: 100%; overflow-x: hidden; } img, video, iframe { max-width: 100%; } img { height: auto; } /* --- Oznaczenie autopromocji --- */ .autopromo { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#9a9ab0; border:1px solid #dcdce4; border-radius:6px; padding:1px 7px; line-height:1.5; white-space:nowrap; } .autopromo:before { content:"i"; display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px; border-radius:50%; background:#dcdce4; color:#fff; font-size:9px; font-weight:800; font-style:italic; text-transform:none; } /* --- Hamburger + mobilne menu (wspólne dla wszystkich rozdzielczości) --- */ .hamburger { position: relative; } .hamburger span { transition: transform .25s, opacity .2s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { top: var(--header-h, 81px) !important; max-height: calc(100vh - var(--header-h, 81px)); overflow-y: auto; padding: 12px 20px 20px !important; } .mobile-nav a { display: block; border-bottom: 1px solid var(--border, #e8e8ee); border-radius: 0 !important; padding: 14px 8px !important; font-size: 17px; } .mobile-nav a:last-child { border-bottom: none; } .mobile-nav a.active { color: var(--accent, #2E7D32); font-weight: 600; } /* ============================================================ TABLET (do 1024px): chowamy menu górne, pokazujemy hamburger, układy dwukolumnowe → jedna kolumna ============================================================ */ @media (max-width: 1024px) { .header-nav { display: none !important; } .hamburger { display: flex !important; } .header-inner { padding: 12px 20px; gap: 12px; } .header-logo img { height: 56px; } .header-inner > .search-btn { margin-left: auto; } /* strona główna */ .featured-wrapper { grid-template-columns: 1fr; } .ad-vertical-wrap, .ad-vertical { display: none; } .content-sidebar { grid-template-columns: 1fr; } .article-grid { grid-template-columns: repeat(2, 1fr); } .featured .card-big .card-img { min-height: 320px; } /* artykuł / kategoria / strona */ .art-layout, .cat-layout, .page-layout { grid-template-columns: 1fr; gap: 32px; padding: 28px 20px 60px; } .art-sidebar, .cat-sidebar, .page-sidebar { order: 2; } .cat-grid { grid-template-columns: repeat(2, 1fr); } /* ranking */ .stats-row { grid-template-columns: repeat(2, 1fr); } .sp-grid { grid-template-columns: 1fr; } /* stopka */ .footer-top { flex-wrap: wrap; gap: 32px 40px; } .footer-col { flex: 1 1 40%; } .footer-col-logo { flex: 1 1 100%; } } /* ============================================================ TELEFON (do 768px): wszystko w jednej kolumnie ============================================================ */ @media (max-width: 768px) { body { font-size: 16px; } .header-inner { padding: 10px 16px; } .header-logo img { height: 48px; } .hamburger { width: 42px; height: 42px; } .search-btn svg { width: 22px; height: 22px; } /* sekcje strony głównej */ .section, .newsletter, .ad-banner { padding: 0 16px; margin-bottom: 44px; } .section:first-of-type { margin-top: 24px; } .section-head { flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .section-head h2 { font-size: 22px; } .featured, .article-grid, .cat-grid { grid-template-columns: 1fr; gap: 16px; } .featured .card-big { grid-row: auto; } .featured .card-big .card-img { height: 220px; min-height: auto; } .featured .card-big .card-body h3 { font-size: 20px; } .card-img { height: 200px; } .card-body { padding: 18px; } .card-body h3 { font-size: 18px; } .card-meta { flex-wrap: wrap; gap: 8px 14px; } .sidebar-widget { padding: 20px; } .newsletter-box { padding: 32px 20px; } .newsletter-box h2 { font-size: 22px; } .newsletter-box p { font-size: 15px; } .nl-form { flex-direction: column; } .nl-form button { width: 100%; } .hero { padding: 36px 16px 28px; } .hero h1 { font-size: 28px; } .hero p { font-size: 16px; } /* artykuł */ .art-layout, .cat-layout, .page-layout { padding: 20px 16px 48px; gap: 28px; } .art-main h1, .page-content h1, .cat-header h1, .page-hero h1 { font-size: 26px; line-height: 1.25; } .art-meta { flex-wrap: wrap; gap: 8px 14px; font-size: 13px; } .art-hero { border-radius: 12px; } .art-body { font-size: 16px; line-height: 1.75; } .art-body h2 { font-size: 22px; } .art-body h3 { font-size: 19px; } .art-body img, .art-body figure { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .art-body figure { margin: 20px 0 !important; } .art-body table, .page-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px; } .art-body pre, .page-body pre { overflow-x: auto; } .art-body iframe { width: 100%; } .art-extra-images img { max-height: 320px; } .audio-player { padding: 12px 14px; gap: 10px; } .cat-empty { grid-column: auto; padding: 40px 16px; } /* ranking spółdzielni */ .main { padding: 24px 16px 48px; } .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; } .filters { flex-direction: column; align-items: stretch; } .filters input, .filters select { min-width: 0; width: 100%; } .sp-top { gap: 12px; } .sp-meta { gap: 6px 12px; } .pagination { gap: 4px; } /* wyszukiwarka */ .search-overlay { padding: 70px 12px 0; align-items: flex-start; } .search-box { padding: 20px 16px; border-radius: 14px; } .search-box input { font-size: 16px; padding: 12px 14px; } #searchGo { padding: 12px 16px !important; font-size: 15px !important; } /* stopka */ .footer { padding: 40px 16px 24px; } .footer-top { flex-direction: column; gap: 28px; } .footer-col, .footer-col-logo { flex: 1 1 100%; } .footer-col-logo img { height: 40px; } } @media (max-width: 420px) { .header-logo img { height: 42px; } .art-main h1, .page-content h1, .cat-header h1, .page-hero h1 { font-size: 23px; } .stats-row { grid-template-columns: 1fr; } }