/* Dlaczego my – toggle */ #whyList .item.optional { display: none; } #whyList.show-more .item.optional { display: block; } /* HEADER — stabilny układ logo | menu | CTA w jednej linii */ header .nav{ display: grid; grid-template-columns: auto 1fr auto; /* logo | menu | CTA */ align-items: center; column-gap: 16px; height: 68px; } header .logo{ white-space: nowrap; flex-shrink: 0; } header .cta{ white-space: nowrap; flex-shrink: 0; } header .nav nav{ overflow: visible; min-width: 0; } /* klucz: dropdown może wychodzić poza nav */ /* MENU — jeden wiersz */ nav .main-nav, nav .main-nav ul{ list-style:none; margin:0; padding:0; } nav .main-nav{ display:flex; align-items:center; gap:16px; flex-wrap:nowrap; position:relative; min-width:0; } nav .main-nav>li{ flex:0 0 auto; white-space:nowrap; } /* Więcej — dropdown poprawnie w dół, kolumnowo, ponad treścią */ nav .main-nav .more{ position:relative; } nav .main-nav .more .more-menu{ position:absolute; right:0; top:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px; min-width:220px; box-shadow:var(--shadow); display:none !important; /* nadpisuje globalne nav ul{display:flex} */ z-index: 1000; } nav .main-nav .more.open .more-menu{ display:block !important; } nav .main-nav .more .more-menu li{ display:block; } nav .main-nav .more .more-menu a{ display:block; padding:6px 10px; color:var(--text); } /* mobile: chowamy desktopowe menu, zostaje hamburger */ @media (max-width: 720px){ nav ul.main-nav{ display:none; } .mobile-toggle{ display:inline-flex; } } /* Header: logo | menu | CTA w jednej linii */ header .nav{ display: grid; grid-template-columns: auto minmax(0,1fr) auto; /* logo | menu | CTA */ align-items: center; column-gap: 16px; height: 68px; } header .logo{ white-space: nowrap; flex-shrink: 0; } header .cta{ white-space: nowrap; flex-shrink: 0; } header .nav nav{ overflow: visible; min-width: 0; } /* dropdown może wychodzić poza nav */ /* Menu desktop + dropdown Więcej */ nav .main-nav, nav .main-nav ul{ list-style:none; margin:0; padding:0; } nav .main-nav{ display:flex; align-items:center; gap:16px; flex-wrap:nowrap; position:relative; min-width:0; } nav .main-nav>li{ flex:0 0 auto; white-space:nowrap; } nav .main-nav .more{ position:relative; } nav .main-nav .more .more-menu{ position:absolute; right:0; top:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px; min-width:220px; box-shadow:var(--shadow); display:none !important; /* nadpisuje globalne "nav ul {display:flex}" */ z-index: 1000; } nav .main-nav .more.open .more-menu{ display:block !important; } nav .main-nav .more .more-menu li{ display:block; } nav .main-nav .more .more-menu a{ display:block; padding:6px 10px; color:var(--text); } /* Mobile: desktopowe menu znika, zostaje hamburger */ @media (max-width: 720px){ nav ul.main-nav{ display:none; } .mobile-toggle{ display:inline-flex; } } /* Header: logo | menu | CTA w jednej linii */ header .nav{ display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; column-gap: 16px; height: 68px; } header .logo{ white-space: nowrap; flex-shrink: 0; } header .cta{ white-space: nowrap; flex-shrink: 0; } header .nav nav{ overflow: visible; min-width: 0; } /* Menu + Więcej */ nav .main-nav, nav .main-nav ul{ list-style:none; margin:0; padding:0; } nav .main-nav{ display:flex; align-items:center; gap:16px; flex-wrap:nowrap; position:relative; min-width:0; } nav .main-nav>li{ flex:0 0 auto; white-space:nowrap; } nav .main-nav .more{ position:relative; } nav .main-nav .more .more-menu{ position:absolute; right:0; top:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px; min-width:220px; box-shadow:var(--shadow); display:none !important; z-index:1000; } nav .main-nav .more.open .more-menu{ display:block !important; } nav .main-nav .more .more-menu li{ display:block; } nav .main-nav .more .more-menu a{ display:block; padding:6px 10px; color:var(--text); } /* Mobile */ @media (max-width: 720px){ nav ul.main-nav{ display:none; } .mobile-toggle{ display:inline-flex; } } /* Dociśnij menu (UL) do prawej krawędzi kolumny nawigacji */ nav .main-nav{ margin-left: auto; /* przesuwa cały UL do prawej */ justify-content: flex-end; /* a elementy wewnątrz trzyma po prawej (gdy UL ma szerokość > contentu) */ } .note-lg{ font-size: 15.5px; line-height: 1.7; } .footer-desc{ font-size:14.5px; color:var(--muted); margin:8px 0 0; } .mini-knowledge{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .mini-knowledge .card img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:8px; margin-bottom:6px; } @media (max-width:1024px){ .mini-knowledge{ grid-template-columns:repeat(2,1fr); } } @media (max-width:720px){ .mini-knowledge{ grid-template-columns:1fr; } } /* O nas — kroki (proces) */ .grid-steps-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } @media (max-width: 1200px){ .grid-steps-5{ grid-template-columns:repeat(4,1fr); } } @media (max-width: 1024px){ .grid-steps-5{ grid-template-columns:repeat(3,1fr); } } @media (max-width: 860px){ .grid-steps-5{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 600px){ .grid-steps-5{ grid-template-columns:1fr; } } /* ================================ Licznik odliczający dni i godziny ================================ */ #countdown { border: 2px solid var(--accent); padding: 20px; margin: 30px auto; width: fit-content; text-align: center; border-radius: 10px; font-family: "Segoe UI", sans-serif; } #countdown h2 { color: var(--accent); margin-bottom: 15px; } #licznik { display: flex; align-items: center; justify-content: center; gap: 10px; } .btn-value { background-color: var(--accent); color: white; font-weight: bold; padding: 10px 18px; border-radius: 8px; min-width: 60px; text-align: center; font-size: 1.9em; } .label { color: #333; font-size: 1.3em; margin-right: 5px; } /* ================================ RESPONSYWNOŚĆ: zmniejszamy styl ================================ */ @media (max-width: 768px) { #countdown { padding: 15px; } #countdown h2 { font-size: 1.1em; } #licznik { gap: 6px; /* mniejszy odstęp */ } .btn-value { font-size: 1.1em; padding: 8px 12px; min-width: 45px; } .label { font-size: 0.9em; } } @media (max-width: 480px) { #countdown { padding: 10px; } #countdown h2 { font-size: 1em; } .btn-value { font-size: 1em; padding: 6px 10px; min-width: 40px; } .label { font-size: 0.8em; } }