/* ========================================================================== ZSN Piechcin — nowy system wizualny (2026) Warstwa nakladana na PureCSS. Nie usuwa starych klas pure-*, tylko je nadpisuje / rozszerza. Kolory bazowe wziete z logo: róż #ed1364, zielen #a7ce39, niebieski #027dc5. ========================================================================== */ :root{ --navy-950:#050e1c; --navy-900:#0a1830; --navy-800:#0f2444; --navy-700:#16335e; --blue:#027dc5; --blue-light:#4fb3ec; --pink:#ed1364; --pink-dark:#a30d4c; --pink-light:#ff5c9a; --green:#a7ce39; --green-dark:#5c8017; --green-light:#c3e46b; --ink:#101827; --muted:#5b6577; --border:rgba(15,24,44,0.09); --radius:16px; --font-heading:'Sora', 'Segoe UI', sans-serif; --font-body:'Inter', 'Segoe UI', sans-serif; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:var(--font-body); color:var(--ink); -webkit-font-smoothing:antialiased; } h1, h2, h3, .content-subhead, .blog-subhead, .post-title{ font-family:var(--font-heading); } a{ color:var(--pink); } a:hover, a:focus{ color:var(--green-dark); } /* -------------------------------------------------------------------- Responsywne bezpieczniki — zapobiegaja przewijaniu w bok na telefonie -------------------------------------------------------------------- */ /* overflow-x:hidden tylko na body, NIE na html — ustawienie go na psuje renderowanie position:fixed na iOS Safari i pochodnych silnikach mobilnych (menu, baner cookies, widget FaniMani) */ html{ max-width:100%; } body{ max-width:100%; overflow-x:hidden; } /* zabezpieczenie: transform/filter na (czasem uzywane przez zewnetrzne widgety popup/animacyjne) zmienia punkt odniesienia dla WSZYSTKICH position:fixed elementow na stronie (baner cookies, panel menu, FaniMani) z calego ekranu na sam — blokujemy to na sztywno */ body{ transform:none !important; -webkit-transform:none !important; filter:none !important; -webkit-filter:none !important; } img, svg, video{ max-width:100%; height:auto; } iframe{ max-width:100%; } table{ max-width:100%; } .table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:1em; } .table-scroll table{ min-width:560px; } pre, code{ max-width:100%; overflow-x:auto; } /* ========================================================================== NAVBAR ========================================================================== */ #layout{ padding-left:0 !important; left:0 !important; position:static !important; } #menu{ display:none !important; } .menu-link{ display:none !important; } .navbar{ position:sticky; top:0; z-index:200; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 76px 10px 24px; background:rgba(255,255,255,0.82); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid var(--border); } .navbar-brand{ display:flex; align-items:center; flex-shrink:0; } .navbar-brand img{ height:40px; width:auto; display:block; } .navbar-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:rgba(15,24,44,0.03); cursor:pointer; flex-shrink:0; } .navbar-toggle span{ display:block; height:2px; width:20px; margin:0 auto; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .navbar-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .navbar-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .navbar-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .navbar-menu{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; justify-content:flex-end; } .navbar-nav{ list-style:none; margin:0; padding:0; display:flex; align-items:center; flex-wrap:wrap; gap:1px; } .navbar-item{ position:relative; } .nav-link{ display:inline-flex; align-items:center; gap:4px; color:var(--ink); font-size:13.5px; font-weight:500; font-family:var(--font-body); text-decoration:none; padding:9px 11px; border-radius:9px; background:none; border:none; cursor:pointer; white-space:nowrap; transition:background .15s ease, color .15s ease; } .nav-link:hover, .nav-link:focus-visible{ color:var(--pink); background:rgba(237,19,100,0.07); } /* uzywamy natywnych

jako dropdownow — dziala i na desktopie (mega-menu) i na mobile (akordeon), bez potrzeby JS */ details.navbar-item{ position:relative; } details.navbar-item > summary.nav-link{ list-style:none; } details.navbar-item > summary.nav-link::-webkit-details-marker{ display:none; } details.navbar-item > summary.nav-link::after{ content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-left:2px; margin-top:-3px; opacity:.55; transition:transform .15s ease; } details.navbar-item[open] > summary.nav-link::after{ transform:rotate(-135deg); margin-top:3px; } details.navbar-item[open] > summary.nav-link{ color:var(--pink); background:rgba(237,19,100,0.07); } .dropdown{ position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:rgba(255,255,255,0.96); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:0 24px 48px -16px rgba(15,24,44,0.24); z-index:210; } .dropdown.dropdown-wide{ min-width:640px; display:grid; grid-template-columns:repeat(3, 1fr); gap:2px 18px; } /* tylko ostatnia pozycja z rozwijanym menu (Spolecznosc szkolna) rownana do prawej, zeby nie wyjechac poza ekran — Kontakt (ostatnie li) nie ma dropdownu, wiec selektor go nie dotyczy */ @media (min-width:1201px){ .navbar-nav > li:nth-last-child(-n+2) .dropdown{ left:auto; right:0; } } .dropdown-col-title{ color:var(--pink); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:8px 10px 4px; } .dropdown a{ display:block; color:var(--ink); font-size:13.5px; text-decoration:none; padding:8px 10px; border-radius:8px; transition:background .15s ease, color .15s ease; } .dropdown a:hover, .dropdown a:focus-visible{ background:rgba(2,125,197,0.08); color:var(--blue); } .navbar-social{ display:flex; align-items:center; gap:14px; margin-left:6px; padding-left:14px; border-left:1px solid var(--border); } .navbar-social a{ color:var(--muted); display:flex; } .navbar-social a:hover{ color:var(--pink); } .navbar-social svg{ width:16px; height:16px; fill:currentColor; } .navbar-social .bip-link img{ height:22px; width:auto; } .nav-cta{ background:var(--pink); color:#fff !important; font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:999px; text-decoration:none; white-space:nowrap; box-shadow:0 4px 14px -4px rgba(237,19,100,0.55); transition:box-shadow .2s ease, transform .15s ease; flex-shrink:0; } .nav-cta:hover{ color:#fff; box-shadow:0 6px 20px -2px rgba(237,19,100,0.8); transform:translateY(-1px); } /* #counter - licznik sesji admina, widoczny tylko po zalogowaniu; kiedy pusty (zwykli odwiedzajacy) nie ma zajmowac miejsca i tworzyc bialej szpary pod navbarem */ #counter{ margin:0; text-align:center; font-size:12px; color:var(--muted); padding:4px 0 0; } #counter:empty{ display:none; margin:0; padding:0; } /* mobile nav ---------------------------------------------------------- */ @media (max-width:1200px){ /* KLUCZOWE: backdrop-filter na .navbar zmienia punkt odniesienia dla position:fixed elementow potomnych (.navbar-menu) z calego ekranu na sama belke nawigacji — dlatego panel mobilny byl "sciskany" do wysokosci paska menu zamiast rozciagac sie na cala strone. */ .navbar{ padding-right:92px; backdrop-filter:none; -webkit-backdrop-filter:none; } .navbar-toggle{ display:flex; } .navbar-menu{ position:fixed; inset:64px 0 0 0; flex-direction:column; align-items:stretch; justify-content:flex-start; background:rgba(255,255,255,0.98); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:16px 20px 32px; overflow-y:auto; transform:translateX(100%); transition:transform .25s ease; z-index:199; } .navbar-menu.is-open{ transform:translateX(0); } .navbar-nav{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; width:100%; } .navbar-item{ width:100%; } .nav-link{ width:100%; padding:13px 10px; font-size:15px; border-bottom:1px solid var(--border); border-radius:0; } details.navbar-item > summary.nav-link::after{ margin-left:auto; } .dropdown, .dropdown.dropdown-wide{ position:static; display:block; box-shadow:none; border:none; border-radius:0; background:rgba(15,24,44,0.02); margin-bottom:6px; } .navbar-social{ margin:16px 0 0; padding:16px 0 0; border-left:none; border-top:1px solid var(--border); justify-content:center; } .nav-cta{ margin-top:16px; text-align:center; justify-content:center; } } /* ========================================================================== HERO (strona glowna) ========================================================================== */ .hero{ position:relative; overflow:hidden; background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(2,125,197,0.30), transparent 60%), radial-gradient(ellipse 700px 500px at 90% 15%, rgba(237,19,100,0.24), transparent 60%), radial-gradient(ellipse 800px 600px at 50% 115%, rgba(167,206,57,0.20), transparent 60%), linear-gradient(180deg, rgba(5,14,28,0.88), rgba(10,24,48,0.86) 55%, rgba(15,36,68,0.92)), url('../../images/hero_budynek.jpg'); background-size:auto,auto,auto,auto,cover; background-position:center,center,center,center,center; background-repeat:no-repeat; padding:72px 24px 88px; text-align:center; } .hero-inner{ position:relative; max-width:720px; margin:0 auto; } .hero-logo{ height:112px; width:auto; margin:0 auto 26px; } .hero h1{ color:#fff; font-size:38px; font-weight:800; line-height:1.16; letter-spacing:-0.3px; margin:0 0 18px; } .hero p{ color:rgba(255,255,255,0.7); font-size:16px; max-width:600px; margin:0 auto 30px; } .hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; } .btn{ font-family:var(--font-body); font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:12px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .2s ease; border:1px solid transparent; cursor:pointer; } .btn-primary{ background:linear-gradient(135deg,var(--pink),var(--pink-dark)); color:#fff !important; box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px -6px rgba(237,19,100,0.6); } .btn-primary:hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 0 30px 2px rgba(237,19,100,0.7); } .btn-glass{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.24); color:#fff !important; backdrop-filter:blur(6px); } .btn-glass:hover{ background:rgba(255,255,255,0.16); box-shadow:0 0 20px rgba(2,125,197,0.4); } .hero-stats{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .stat-pill{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(10px); border-radius:14px; padding:14px 20px; min-width:150px; text-align:left; } .stat-pill .n{ color:#fff; font-family:var(--font-heading); font-size:14.5px; font-weight:700; line-height:1.3; } .stat-pill .l{ color:rgba(255,255,255,0.55); font-size:11px; margin-top:3px; } .stat-pill.pink .n{ color:var(--pink-light); } .stat-pill.blue .n{ color:var(--blue-light); } .stat-pill.green .n{ color:var(--green-light); } @media (max-width:600px){ .hero{ padding:52px 18px 60px; } .hero h1{ font-size:28px; } .hero-stats{ flex-direction:column; align-items:stretch; } .stat-pill{ min-width:0; } } /* ========================================================================== NAGLOWKI PODSTRON (.header/.content — uzywane na kazdej stronie serwisu) ========================================================================== */ .header{ max-width:1180px; margin:0 auto; color:var(--ink); text-align:center; padding:2.6em 24px 1.4em; border-bottom:none; } .header h1{ margin:0 0 0.2em; font-size:2.2em; font-weight:700; color:var(--ink); } .header h2{ font-weight:500; color:var(--muted); padding:0; margin-top:0; font-family:var(--font-body); } .content{ max-width:1180px; margin:0 auto; padding:0 24px; line-height:1.7; } .content-subhead{ margin:2em 0 0.6em; font-weight:700; color:var(--ink); font-size:1.3em; } /* karty aktualnosci / wpisy blogowe ----------------------------------- */ .posts{ margin-bottom:1em; } /* siatka kart na stronie glownej (.posts > .pure-g > .pure-u-md-1-3) — dodajemy odstepy miedzy kartami i wyrownujemy ich wysokosc w wierszu */ .posts > .pure-g > div{ padding:0 0.6em; display:flex; } .posts > .pure-g > div > .post{ display:flex; flex-direction:column; width:100%; } .posts > .pure-g > div > .post .post-description{ flex:1; } .blog-subhead{ text-transform:none; color:var(--pink); border-bottom:none; padding:0; font-size:1.15em; font-weight:700; letter-spacing:0; margin-bottom:0.8em; } .post{ background:rgba(255,255,255,0.7); border:1px solid var(--border); border-radius:var(--radius); padding:1.4em 1.6em; margin-bottom:1.2em; box-shadow:0 1px 2px rgba(15,24,44,0.03), 0 12px 28px -18px rgba(15,24,44,0.16); transition:transform .2s ease, box-shadow .2s ease; } .post:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(15,24,44,0.04), 0 18px 34px -16px rgba(15,24,44,0.2); } .post-title{ color:var(--ink); margin-bottom:0.15em; font-weight:700; } .post-title a{ color:var(--ink); } .post-title a:hover{ color:var(--pink); } .post-meta{ color:var(--muted); font-size:88%; } .post-description{ color:var(--ink); line-height:1.75; } .post-images{ border-radius:12px; overflow:hidden; } .post-images img{ border-radius:12px; } /* pasmo przypietej wiadomosci — ciemne tlo na pelnej szerokosci ekranu, niezaleznie od max-width kontenera .content */ .pinned-band{ background:linear-gradient(135deg, var(--navy-900), var(--navy-950)); width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding:2.6em 24px; margin-top:2.4em; margin-bottom:2em; } .pinned-band-inner{ max-width:1180px; margin:0 auto; } .pinned-band .blog-subhead{ color:var(--pink-light); } /* karta przypietej wiadomosci — szklany panel na ciemnym pasmie */ .post-pinned{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow:0 1px 2px rgba(5,14,28,0.2), 0 18px 40px -18px rgba(5,14,28,0.55); margin-bottom:0; } .post-pinned:hover{ border-color:rgba(255,255,255,0.24); box-shadow:0 1px 2px rgba(5,14,28,0.25), 0 22px 46px -16px rgba(5,14,28,0.65); } .post-pinned .post-title, .post-pinned .post-title a{ color:#fff; } .post-pinned .post-title a:hover{ color:var(--pink-light); } .post-pinned .post-meta{ color:rgba(255,255,255,0.5); } .post-pinned .post-description{ color:rgba(255,255,255,0.82); } .post-pinned .post-description a{ color:var(--pink-light); text-decoration-color:rgba(255,92,154,0.5); } /* przyciski pure-button — delikatny refresh, nie nadpisuje kolorow wlasnych klas typu button-A/B/C */ .pure-button{ border-radius:10px; transition:transform .15s ease, box-shadow .15s ease; } .pure-button:hover{ transform:translateY(-1px); } /* linki w tresci */ .content a{ text-decoration:underline; text-decoration-color:rgba(237,19,100,0.35); text-underline-offset:2px; } .content a:hover{ text-decoration-color:currentColor; } /* ========================================================================== STOPKA ========================================================================== */ .footer{ font-family:var(--font-body); background:var(--navy-950); color:rgba(255,255,255,0.62); border-top:none; margin-top:4em; padding:2.4em 1.5em; } .footer a{ color:rgba(255,255,255,0.78); } .footer a:hover{ color:var(--pink-light); } .footer .legal-license{ color:rgba(255,255,255,0.5); } .footer .legal-copyright{ color:rgba(255,255,255,0.5); } .footer-eu{ display:flex; align-items:center; justify-content:center; text-align:center; margin-top:1.2em; } .footer-eu a{ display:inline-block; background:#fff; padding:8px 16px; border-radius:10px; } .footer-eu img{ display:block; width:220px; max-width:60vw; height:auto; } @media (min-width:768px){ .footer-eu{ margin-top:0; } }