/** * Header + stopka w designie v2 — arkusz dla STAREGO layoutu (layouts/main.php) * * PO CO TO JEST * Podstrony, ktore nie maja jeszcze wlasnego szablonu `-v3`, renderuja sie * w starym layoucie ze starym CSS. Zeby menu bylo wszedzie takie samo jak na * stronie glownej, doklejamy do nich naglowek i stopke z designu v2. * * DLACZEGO NIE PO PROSTU design-v2.css * Tamten plik to kompletny design system z globalnym resetem: ustawia `body`, * `a`, `h1`-`h4`, `p` oraz zmienne `--bg` i `--muted`, ktore w starym systemie * znacza cos INNEGO (`--muted` to tam kolor TLA, tu kolor TEKSTU). Zaladowanie * go obok main.css zmienia font calej strony, gasi kolor linkow w tresci * i psuje tla komponentow. Dlatego tutaj jest tylko to, czego potrzebuje * naglowek i stopka — bez resetu i bez reguł globalnych. * * ZASADY, KTORE TRZYMAJA TEN PLIK Z DALA OD RESZTY SERWISU * 1. Zmienne maja prefiks `--v3-` — nie moga nadpisac zmiennych starego systemu. * 2. Nazwy klas wspoldzielone ze starym CSS (`.btn`, `.mega-tab`, `.nav`, * `.desktop-only`) sa zawsze zagniezdzone pod `.header` / `.footer` / * `.mobile-menu`, wiec dzialaja wylacznie wewnatrz naglowka i stopki. * 3. `.header` i `.footer` zapisane jako `header.header` / `footer.footer` * (wyzsza specyficznosc), zeby wygrac ze starym layout/header.css * niezaleznie od kolejnosci ladowania arkuszy. * * WAZNE: markup pochodzi z partials/header-v3.php i footer-v3.php — tych samych * plikow, ktorych uzywa layout main-v3.php. Nie zmieniaj w nich nazw klas, * bo zepsujesz strony juz dzialajace na nowym designie. * * Motyw ciemny: atrybut [data-theme="dark"] na (ustawia go main-v2.js). * Stary system reaguje dodatkowo na klase `.dark` — patrz core/variables.css. */ /* ========================================== TOKENY (prefiks --v3-, zeby nie kolidowaly) ========================================== */ :root { --v3-brand-50: #ECF5FF; --v3-brand-100: #D6EAFF; --v3-brand-200: #ADD3FF; --v3-brand-400: #3D95E8; --v3-brand: #0A6FCE; --v3-brand-600: #0959A8; --v3-brand-700: #084988; --v3-accent: #F0821E; --v3-ink: #0E1A2B; --v3-ink-2: #3C4C61; --v3-muted: #6B7A8D; --v3-line: #E4EAF1; --v3-line-2: #EFF3F8; --v3-bg: #FFFFFF; --v3-surface: #FFFFFF; --v3-sh-sm: 0 2px 6px rgba(14,26,43,.06), 0 1px 2px rgba(14,26,43,.04); --v3-sh-lg: 0 20px 48px rgba(14,26,43,.12), 0 4px 12px rgba(14,26,43,.06); --v3-sh-brand: 0 10px 30px rgba(10,111,206,.28); --v3-r-sm: 10px; --v3-r-md: 16px; --v3-r-full: 999px; --v3-container: 1480px; --v3-header-h: 72px; --v3-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --v3-ease: cubic-bezier(.22,.61,.36,1); } [data-theme="dark"] { --v3-brand-50: #0E2439; --v3-brand-100: #12324F; --v3-brand-200: #1B4A72; --v3-brand-400: #4FA3F0; --v3-brand: #3B95E8; --v3-brand-600: #5CA9F0; --v3-ink: #EAF0F7; --v3-ink-2: #B4C2D3; --v3-muted: #8496AA; --v3-line: #22334A; --v3-line-2: #1A2839; --v3-bg: #0B1421; --v3-surface: #14202F; --v3-sh-sm: 0 2px 6px rgba(0,0,0,.4); --v3-sh-lg: 0 20px 48px rgba(0,0,0,.55); --v3-sh-brand: 0 10px 30px rgba(59,149,232,.25); } /* ========================================== WSPOLNE DLA NAGLOWKA I STOPKI ========================================== */ /* Font i reset linkow TYLKO w obrebie naglowka/stopki. Bez tego stary `a { color: var(--primary) }` pomalowalby cala nawigacje na niebiesko, a tekst poszedlby starym Open Sansem. */ header.header, .mega, .overlay, aside.mobile-menu, footer.footer { font-family: var(--v3-font); box-sizing: border-box; } header.header *, .mega *, aside.mobile-menu *, footer.footer * { box-sizing: border-box; } header.header a, .mega a, aside.mobile-menu a, footer.footer a { color: inherit; text-decoration: none; } /* Przyciski — zagniezdzone, zeby nie ruszyc `.btn` w tresci stron */ header.header .btn, aside.mobile-menu .btn, footer.footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.3rem; border-radius: var(--v3-r-full); font-weight: 700; font-size: .94rem; white-space: nowrap; border: 0; transition: transform .22s var(--v3-ease), box-shadow .22s var(--v3-ease), background .2s, color .2s, border-color .2s; } header.header .btn:hover, aside.mobile-menu .btn:hover, footer.footer .btn:hover { transform: translateY(-2px); } header.header .btn--primary, aside.mobile-menu .btn--primary, footer.footer .btn--primary { background: var(--v3-brand); color: #fff; box-shadow: var(--v3-sh-brand); } header.header .btn--primary:hover, aside.mobile-menu .btn--primary:hover, footer.footer .btn--primary:hover { background: var(--v3-brand-600); color: #fff; } header.header .btn--ghost { background: transparent; color: var(--v3-ink); } header.header .btn--ghost:hover { background: var(--v3-line-2); } /* ========================================== NAGLOWEK ========================================== */ header.header { /* display:flex jest tu funkcjonalne, nie kosmetyczne: kontener flex ignoruje biale znaki miedzy elementami. W ukladzie blokowym whitespace miedzy .header-inner a .mega (ktory jest position:absolute, wiec poza flow) tworzyl anonimowa linie tekstu i doklejal ~22 px do wysokosci naglowka — przez co podstrony mialy wyzszy naglowek niz strona glowna. */ display: flex; flex-direction: column; position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; box-shadow: none; transition: border-color .3s, box-shadow .3s, background .3s; } [data-theme="dark"] header.header { background: rgba(11,20,33,.85); } header.header.is-scrolled { border-bottom-color: var(--v3-line); box-shadow: var(--v3-sh-sm); } header.header .header-inner { max-width: var(--v3-container); margin-inline: auto; padding: 0 20px; height: var(--v3-header-h); display: flex; align-items: center; gap: 1rem; } header.header .logo { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } header.header .logo-img { height: 42px; width: auto; display: block; } /* `.nav` to bardzo ogolna nazwa — zawsze pod naglowkiem */ header.header .nav { display: flex; align-items: center; gap: .35rem; margin-left: .75rem; } header.header .nav-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: var(--v3-r-full); font-weight: 700; font-size: .92rem; color: var(--v3-ink-2); background: none; border: 0; cursor: pointer; transition: background .2s, color .2s; } header.header .nav-btn:hover, header.header .nav-btn.is-open { background: var(--v3-line-2); color: var(--v3-ink); } header.header .nav-btn svg { width: 16px; height: 16px; } header.header .nav-btn .chev { transition: transform .25s var(--v3-ease); } header.header .nav-btn.is-open .chev { transform: rotate(180deg); } header.header .nav-btn--primary { background: var(--v3-brand-50); color: var(--v3-brand); } header.header .nav-btn--primary:hover, header.header .nav-btn--primary.is-open { background: var(--v3-brand-100); color: var(--v3-brand-600); } header.header .header-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; } header.header .icon-btn { width: 40px; height: 40px; border-radius: var(--v3-r-full); display: grid; place-items: center; color: var(--v3-ink-2); background: none; border: 0; cursor: pointer; transition: background .2s, color .2s; } header.header .icon-btn:hover { background: var(--v3-line-2); color: var(--v3-ink); } header.header .icon-btn svg { width: 19px; height: 19px; } header.header .icon-sun { display: none; } [data-theme="dark"] header.header .icon-sun { display: block; } [data-theme="dark"] header.header .icon-moon { display: none; } /* ========================================== MEGA MENU ========================================== */ .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--v3-surface); border-bottom: 1px solid var(--v3-line); box-shadow: var(--v3-sh-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s var(--v3-ease), transform .25s var(--v3-ease), visibility .25s; z-index: 99; } .mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mega .mega-inner { max-width: var(--v3-container); margin-inline: auto; padding: 1.75rem 20px 1.25rem; } .mega .mega-tabs { display: flex; gap: .4rem; margin-bottom: 1.4rem; flex-wrap: wrap; } .mega .mega-tab { padding: .5rem 1rem; border-radius: var(--v3-r-full); font-weight: 700; font-size: .88rem; color: var(--v3-muted); background: none; border: 0; cursor: pointer; } .mega .mega-tab:hover { background: var(--v3-line-2); color: var(--v3-ink); } .mega .mega-tab.is-active { background: var(--v3-ink); color: var(--v3-bg); } .mega .mega-panel { display: none; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; } .mega .mega-panel.is-active { display: grid; } .mega .mega-col h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--v3-muted); margin-bottom: .7rem; font-weight: 800; } .mega .mega-col a { display: block; padding: .3rem 0; font-size: .9rem; color: var(--v3-ink-2); font-weight: 500; transition: color .18s, padding-left .18s; } .mega .mega-col a:hover { color: var(--v3-brand); padding-left: 5px; } /* Stopka mega menu ma wlasne tlo — inaczej przycisk wisial na bialym tle obok kolumn z linkami i nie bylo widac, ze to osobna, nadrzedna akcja */ .mega .mega-foot { margin-top: 1.5rem; padding: .9rem 1.1rem; border-top: 1px solid var(--v3-line); background: var(--v3-brand-50); border-radius: var(--v3-r-md); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .mega .mega-foot span { font-size: .86rem; color: var(--v3-muted); } .mega .mega-foot-cta svg { width: 17px; height: 17px; } .mega .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--v3-brand); } .mega .link-arrow svg { width: 17px; height: 17px; } /* ========================================== OVERLAY + MENU MOBILNE ========================================== */ /* z-index 90 — NIZEJ niz .header (100), a wyzej niz tresc strony. Header jest sticky z wlasnym z-index, wiec tworzy kontekst stakowania: mega menu siedzi w srodku i nie moze przebic elementu o wyzszym z-index niz sam header. Przy z-index 110 overlay kladl sie NA rozwiniete mega menu i przyciemnial je, jakby bylo nieaktywne. Menu mobilne (z-index 120) nadal jest nad overlayem. */ .overlay { position: fixed; inset: 0; background: rgba(8,16,28,.45); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .overlay.is-open { opacity: 1; visibility: visible; } aside.mobile-menu { /* `left: auto` jest tu KONIECZNE — stary layout/header.css ustawia `.mobile-menu { left: 0 }`. Bez cofniecia tej wartosci panel kotwiczy sie do lewej krawedzi i `translateX(100%)` wypycha go na srodek ekranu zamiast schowac za prawa krawedzia. */ position: fixed; top: 0; right: 0; left: auto; bottom: 0; width: min(360px, 88vw); background: var(--v3-surface); z-index: 120; padding: 1.25rem; transform: translateX(100%); transition: transform .32s var(--v3-ease); overflow-y: auto; box-shadow: var(--v3-sh-lg); color: var(--v3-ink); } aside.mobile-menu.is-open { transform: translateX(0); } aside.mobile-menu .mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } aside.mobile-menu .mobile-head b { font-size: 1.05rem; } aside.mobile-menu .icon-btn { width: 40px; height: 40px; border-radius: var(--v3-r-full); display: grid; place-items: center; color: var(--v3-ink-2); background: none; border: 0; cursor: pointer; } aside.mobile-menu .icon-btn svg { width: 19px; height: 19px; } aside.mobile-menu .mm-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--v3-muted); font-weight: 800; margin: 1.1rem 0 .4rem; } aside.mobile-menu .mm-link { display: flex; align-items: center; justify-content: space-between; padding: .7rem .75rem; border-radius: var(--v3-r-sm); font-weight: 600; color: var(--v3-ink-2); } aside.mobile-menu .mm-link:hover { background: var(--v3-line-2); color: var(--v3-ink); } aside.mobile-menu .mm-link--primary { background: var(--v3-brand); color: #fff; justify-content: center; margin-top: .75rem; } /* Wejscie na pelna liste — ten sam akcent co przycisk w mega menu na desktopie */ aside.mobile-menu .mm-link--strong { background: var(--v3-brand-50); color: var(--v3-brand); font-weight: 700; } aside.mobile-menu .mm-divider { height: 1px; background: var(--v3-line); margin: 1rem 0; } header.header .burger { display: none; } /* ========================================== STOPKA ========================================== */ footer.footer { background: #0C1725; color: #C4D0DE; padding-block: clamp(2.5rem, 4vw, 4rem) 1.5rem; margin-top: 4rem; } [data-theme="dark"] footer.footer { background: #070F1A; } footer.footer .container { max-width: var(--v3-container); margin-inline: auto; padding-inline: 20px; } footer.footer .footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr; gap: 2rem; } footer.footer .logo-img { height: 42px; width: auto; display: block; } footer.footer .footer-about { font-size: .89rem; color: #94A5B8; margin-top: .9rem; max-width: 32ch; } footer.footer h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; font-weight: 800; } footer.footer .footer-links { display: flex; flex-direction: column; gap: .5rem; } footer.footer .footer-links a { font-size: .89rem; color: #A9B8C9; transition: color .2s, padding-left .2s; } footer.footer .footer-links a:hover { color: #fff; padding-left: 4px; } footer.footer .footer-note { font-size: .76rem; color: #7E90A5; margin-top: .6rem; } footer.footer .socials { display: flex; gap: .5rem; margin-top: 1.2rem; } footer.footer .social { width: 38px; height: 38px; border-radius: var(--v3-r-full); background: rgba(255,255,255,.07); display: grid; place-items: center; color: #C4D0DE; transition: background .2s, color .2s, transform .2s; } footer.footer .social:hover { background: var(--v3-brand); color: #fff; transform: translateY(-2px); } footer.footer .social svg { width: 17px; height: 17px; } footer.footer .footer-seo { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); } footer.footer .footer-seo h4 { margin-bottom: .8rem; } footer.footer .footer-seo-links { display: flex; flex-wrap: wrap; gap: .4rem .5rem; } footer.footer .footer-seo-links a { font-size: .82rem; color: #8FA1B4; } footer.footer .footer-seo-links a:hover { color: #fff; text-decoration: underline; } footer.footer .footer-bottom { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: #7E90A5; } footer.footer .footer-bottom-links { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* ========================================== RESPONSYWNOSC ========================================== */ /* Na bardzo szerokich ekranach design v2 podnosi naglowek — te same wartosci co w design-v2.css, zeby podstrony nie mialy nizszego paska niz strona glowna. */ @media (min-width: 2200px) { :root { --v3-header-h: 84px; } } @media (max-width: 1100px) { footer.footer .footer-top { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 900px) { /* Ponizej tego progu nawigacja desktopowa znika, wchodzi burger. `!important` bo stary core/utilities.css ma wlasna regule `.desktop-only { display: inline-flex }` od 1024 px. */ header.header .nav, header.header .desktop-only { display: none !important; } header.header .burger { display: grid; } footer.footer .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { header.header .logo-img, footer.footer .logo-img { height: 34px; } header.header .header-inner { padding: 0 16px; } footer.footer .footer-top { grid-template-columns: 1fr; } footer.footer .footer-bottom { flex-direction: column; gap: .6rem; } }