. * Ten div jest wysoki dokładnie na oba paski nagłówka, a "position: sticky" * działa WYŁĄCZNIE w granicach rodzica - belka nie ma więc gdzie się przesuwać * i wyjeżdża razem z opakowaniem. Sama reguła sticky wyżej jest poprawna, * problemem jest pudełko wokół niej. * * "display: contents" usuwa to opakowanie z układu, nie ruszając zawartości: * pasek kontaktowy i belka stają się bezpośrednimi dziećmi .wp-site-blocks, * czyli mają do dyspozycji całą wysokość strony. * * Selektor celuje wyłącznie w część z nagłówkiem - stopka zostaje nietknięta. */ .wp-block-template-part:has( > .gg-header ) { display: contents; } .gg-header .gg-header__brand { gap: 0.6rem; align-items: center; } /* * Menu w headerze: równe odstępy od logo i od przycisku "Kontakt". * Logo i CTA zajmują tylko tyle, ile potrzebują, a nawigacja przejmuje * całą wolną przestrzeń między nimi i centruje w niej swoje pozycje - * dzięki temu odległość z lewej i z prawej strony menu jest identyczna, * niezależnie od tego, jak szerokie jest logo. */ .gg-header .gg-header__brand, .gg-header .gg-header__cta { flex: 0 0 auto; } .gg-header .gg-header__nav { flex: 1 1 auto; justify-content: center; gap: 2.25rem; } .gg-header .gg-header__nav a { font-size: 16px; text-decoration: none; font-weight: 600; } /* * Menu drugiego poziomu (rozwijane, np. "Usługi"). * * Dlaczego to trzeba było napisać ręcznie: rdzeń WordPressa ustawia * kontenerowi submenu białe tło tylko wtedy, gdy sama nawigacja nie ma * ustawionego tła (".wp-block-navigation:not(.has-background)"), ale * kolor tekstu dziedziczy z nawigacji - a ta ma "textColor":"base" * (kremowy). Efekt: kremowy tekst na białym tle, czyli menu niewidoczne. * Poniżej ustawiamy jedno i drugie jawnie. * * Selektory łączą klasę sekcji z klasą bloku (.gg-header__nav.wp-block-navigation), * żeby wygrać specyficznością z regułami rdzenia bez !important. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__submenu-container { min-width: 320px; padding-block: 0.5rem; padding-inline: 0; border: 0; border-radius: 10px; background-color: #3a2750; color: var( --wp--preset--color--base ); box-shadow: 0 18px 40px rgba( 43, 27, 58, 0.28 ); } /* * Szerokość rozwiniętego submenu. * Rdzeń ustawia min-width: 200px w regułach zawierających :hover / * :focus-within (specyficzność 0,5,0), więc żeby je nadpisać bez * !important, powtarzamy tu ten sam kształt selektora. */ .gg-header .gg-header__nav.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container, .gg-header .gg-header__nav.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container { min-width: 320px; } /* Pozycje submenu - pełna szerokość, wyrównanie do lewej. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; width: 100%; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; width: 100%; padding: 0.7rem 1.25rem; font-size: 15px; font-weight: 500; line-height: 1.4; color: var( --wp--preset--color--base ); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { background-color: rgba( 245, 239, 230, 0.08 ); color: var( --wp--preset--color--accent-finanse ); } /* Aktualnie otwarta podstrona zaznaczona lawendową kreską. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { color: var( --wp--preset--color--accent-finanse ); box-shadow: inset 3px 0 0 var( --wp--preset--color--accent-finanse ); } /* Strzałka przy pozycji z podmenu - ten sam kremowy co tekst. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__submenu-icon { color: currentColor; padding-inline-start: 0.35rem; } /* * Trzeci poziom - rozwija się w bok, a nie pod spodem. * Rdzeń ustawia left: 100%; tutaj tylko korygujemy odstęp pionowy, * żeby pierwszy element zrównał się z rodzicem. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { top: -0.5rem; } /* * Widok mobilny (overlayMenu: mobile). W rozwiniętym menu pełnoekranowym * submenu nie jest "dymkiem" - to lista wcięta pod rodzicem, więc * zdejmujemy tło, cień i zaokrąglenia ustawione wyżej. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { background-color: var( --wp--preset--color--primary ); color: var( --wp--preset--color--base ); padding: 2rem 1.5rem; } /* W menu mobilnym wszystko do lewej - inaczej wyśrodkowany rodzic i wcięte pozycje potomne tworzą krzywą oś. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child { align-items: flex-start; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var( --wp--preset--color--base ); font-size: 18px; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { min-width: 0; padding-block: 0; padding-inline-start: 1rem; border-radius: 0; background-color: transparent; /* * Bez pionowej kreski przy podmenu - decyzja z makiety (5.09). * Podrzędność listy niosą samo wcięcie oraz mniejszy i przygaszony * krój, zdefiniowane niżej w bloku mobilnym. */ box-shadow: none; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-inline: 0.25rem; font-size: 17px; } /* * Przycisk "Kontakt" - dokładne wartości z projektu. * Selektor jest celowo długi (klasa sekcji + klasa grupy + klasa * przycisku), żeby wygrać ze stylami generowanymi przez WordPress * bez sięgania po !important. */ .gg-header .gg-header__cta .wp-block-button .wp-block-button__link { border-radius: 10px; padding: 15px 30px; font-weight: 700; font-size: 16px; line-height: 1.3; background-color: var( --wp--preset--color--accent-finanse ); color: var( --wp--preset--color--base ); text-decoration: none; transition: 0.3s; } .gg-header .gg-header__cta .wp-block-button .wp-block-button__link:hover { background-color: #b17dd3; } /* * Przycisk rozwijania podmenu wstawia skrypt (assets/js/menu-mobilne.js) * do każdej pozycji z podmenu, niezależnie od szerokości okna - inaczej * musiałby przebudowywać drzewo przy każdej zmianie rozmiaru. * Domyślnie jest ukryty; pokazuje go dopiero blok mobilny poniżej. * Na desktopie podmenu rozwija się najechaniem i przycisk jest zbędny. */ .gg-nav-toggle { display: none; } /* * --- Nagłówek na telefonie --- * * Próg 781px odpowiada punktowi, w którym WordPress przełącza nawigację * na menu pełnoekranowe (overlayMenu: "mobile" w parts/header.html). * Powyżej tej szerokości obowiązują reguły desktopowe zdefiniowane wyżej - * ten blok ich nie rusza. */ @media ( max-width: 781px ) { /* --- Górny pasek kontaktowy --- */ .gg-topbar { gap: 0.5rem; padding-block: 0.4rem; } /* * Lokalizacja i e-mail muszą zostać w jednej linii - przy zawijaniu * pasek rośnie do dwóch wierszy i zjada ekran pod przyklejoną belką. */ .gg-topbar .gg-topbar__left { flex-wrap: nowrap; min-width: 0; } /* * Lokalizacja znika - na telefonie liczy się kontakt, a "Wrocław" * jest w stopce i na /kontakt/. Zwolnione miejsce idzie na e-mail. */ .gg-topbar .gg-topbar__item:first-child { display: none; } .gg-topbar .gg-topbar__item { gap: 0.35rem; padding-inline: 0; font-size: 13px; white-space: nowrap; } /* * Kreska rozdzielająca zostaje w arkuszu na desktopie, ale tutaj * e-mail jest już jedyną pozycją - pionowa krecha przed nim wisiałaby * bez sensu. Selektor sąsiadujący nadal pasuje, bo ukryta pozycja * zostaje w drzewie dokumentu. */ .gg-topbar .gg-topbar__item + .gg-topbar__item { border-left: 0; } .gg-topbar .gg-topbar__icon { width: 13px; height: 13px; } /* * Bez tego cztery ikony łamią się w kratkę 2x2 - to właśnie one * rozpychały pasek na dwa wiersze. */ .gg-topbar .gg-topbar__social { flex-wrap: nowrap; gap: 0.25rem; } .gg-topbar .gg-topbar__social .wp-social-link svg { width: 18px; height: 18px; } .gg-topbar .gg-topbar__social .wp-social-link a { padding: 2px; } /* --- Belka główna --- */ .gg-header { gap: 0.5rem; /* Przy przyklejonym nagłówku 2rem góra i dół zabierały 1/5 ekranu. */ padding-block: 0.9rem; } .gg-header .gg-header__brand .wp-block-site-logo img { max-width: 150px; height: auto; } /* * Kontakt zostaje w belce, ale w skali, która mieści się razem * z logo i hamburgerem na ekranie szerokim na 360px. */ .gg-header .gg-header__cta .wp-block-button .wp-block-button__link { padding: 9px 16px; font-size: 14px; } /* * Nawigacja dosunięta do prawej krawędzi belki. Blok ma z desktopu * "justifyContent: center", co na telefonie zostawiało hamburger * w połowie wolnego miejsca zamiast przy krawędzi. */ .gg-header .gg-header__nav.wp-block-navigation { margin-left: auto; justify-content: flex-end; } /* * Klasyczny hamburger. Rdzeń rysuje własny SVG (dwie kreski o różnej * długości), którego nie da się podmienić z arkusza - można go tylko * ukryć i narysować ikonę od nowa. Trzy kreski robi jeden pseudoelement * plus dwa cienie, dzięki czemu nie trzeba dokładać znaczników. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open { position: relative; width: 44px; height: 44px; padding: 0; /* Optyczne wyrównanie do prawej - przycisk ma własny margines wewnętrzny. */ margin-right: -10px; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open svg { display: none; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open::before { content: ""; position: absolute; left: 11px; right: 11px; top: 15px; height: 2px; border-radius: 2px; background-color: currentColor; box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-close { padding: 6px; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; } /* --- Rozwinięte menu pełnoekranowe --- */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { /* Było 2rem w każdą stronę - stąd pusty pas nad pierwszą pozycją. */ padding: 1rem 1.5rem 2.5rem; } /* * Cała lista na pełną szerokość i do lewej krawędzi. Blok nawigacji * dziedziczy z desktopu "justify-content: center", przez co pozycje bez * podmenu lądowały na środku, a "Usługi" - jako element z własnym * układem flex - przy lewej. Stąd brało się wrażenie krzywej osi. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch; justify-content: flex-start; width: 100%; gap: 0; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; justify-content: flex-start; text-align: left; padding-block: 0; border-bottom: 1px solid rgba( 245, 239, 230, 0.12 ); } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child { border-bottom: 0; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding-block: 0.9rem; text-align: left; font-weight: 600; } /* --- Akordeon podmenu (obsługa w assets/js/menu-mobilne.js) --- */ /* * Pozycja z podmenu: odnośnik po lewej, przycisk rozwijania po prawej. * Odnośnik zostaje odnośnikiem - "Usługi" nadal prowadzą na /uslugi/, * a rozwijanie jest osobnym celem dotykowym. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } /* * Odnośnik w wierszu z przyciskiem NIE może mieć width: 100% (dostaje * je z reguły niżej, wspólnej dla wszystkich pozycji) - inaczej zajmuje * cały wiersz i spycha strzałkę do następnej linii. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { flex: 1 1 auto; width: auto; } /* * Rdzeniowa strzałka wewnątrz odnośnika - na telefonie zastępuje ją * nasz przycisk, więc dwie strzałki obok siebie byłyby błędem. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; } .gg-nav-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; background-color: transparent; color: var( --wp--preset--color--base ); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .gg-nav-toggle:hover, .gg-nav-toggle:focus-visible { background-color: rgba( 245, 239, 230, 0.1 ); } .gg-podmenu-otwarte > .gg-nav-toggle { transform: rotate( 180deg ); } /* * Podmenu zwinięte domyślnie. Rozwija je klasa dokładana przez skrypt, * więc bez JavaScriptu lista pozostaje widoczna - żadna pozycja menu * nie staje się nieosiągalna. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { display: none; flex-basis: 100%; margin-top: 0.25rem; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.gg-podmenu-otwarte > .wp-block-navigation__submenu-container { display: block; padding-block-end: 0.75rem; } /* Podpozycje: mniejsze, przygaszone, wcięte - wyraźnie poziom niżej. */ .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; } .gg-header .gg-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-block: 0.55rem; font-size: 16px; font-weight: 500; color: rgba( 245, 239, 230, 0.78 ); } /* --- Przycisk "Kontakt" przeniesiony do rozwiniętego menu --- */ .gg-header__cta.gg-header__cta--w-menu { width: 100%; margin-top: 2rem; } .gg-header__cta.gg-header__cta--w-menu .wp-block-button { width: 100%; } .gg-header .gg-header__cta.gg-header__cta--w-menu .wp-block-button .wp-block-button__link, .gg-header__cta.gg-header__cta--w-menu .wp-block-button .wp-block-button__link { display: block; width: 100%; padding: 14px 20px; font-size: 16px; text-align: center; } } /* Główny kontener treści - bez odstępu nad pierwszą sekcją (hero). */ main { margin-top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var( --wp--preset--color--accent-finanse ); outline-offset: 2px; } @media ( prefers-reduced-motion: reduce ) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= * Wpis blogowy - szerokości i typografia treści * * Style żyją tutaj, a nie w bloku, bo dotyczą treści składanej rdzeniowym * blokiem "Treść wpisu" w templates/single.html - tak samo jak style * nagłówka serwisu, który też jest częścią szablonu, a nie blokiem. * * Dwie zmienne trzymają całą oś wpisu. Zmiana tutaj przesuwa jednocześnie * nagłówek, treść, źródła i bio autora - nie ma drugiego miejsca do poprawienia. * ====================================================================== */ body { /* Kolumna tekstu artykułu. */ --gg-wpis-tekst: 980px; /* Zdjęcie wyróżniające - celowo węższe niż kolumna tekstu. */ --gg-wpis-media: 720px; } .wpis__tresc { max-width: var( --gg-wpis-tekst ) !important; /* przebija contentSize 1200px z theme.json */ margin-inline: auto; padding-top: clamp( 2rem, 3.5vw, 3rem ); } .wpis__tresc > * { margin-block: 0 1.25rem; } .wpis__tresc h2 { font-size: clamp( 1.6rem, 2.4vw, 2.1rem ); font-weight: 800; line-height: 1.25; margin-block: clamp( 2.5rem, 4vw, 3.25rem ) 1rem; scroll-margin-top: 7rem; } .wpis__tresc h3 { font-size: clamp( 1.25rem, 1.8vw, 1.5rem ); font-weight: 700; line-height: 1.3; margin-block: 2rem 0.75rem; } .wpis__tresc p { font-weight: 500; } .wpis__tresc p a, .wpis__tresc li a { color: var( --wp--preset--color--primary ); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var( --gg-accent ); } .wpis__tresc p a:hover, .wpis__tresc li a:hover, .wpis__tresc p a:focus-visible, .wpis__tresc li a:focus-visible { text-decoration-color: var( --wp--preset--color--primary ); } .wpis__tresc ul, .wpis__tresc ol { padding-left: 1.35rem; font-weight: 500; } .wpis__tresc li { margin-bottom: 0.5rem; } .wpis__tresc li::marker { color: #a67c56; font-weight: 700; } .wpis__tresc blockquote { margin: clamp( 2rem, 3vw, 2.5rem ) 0; padding: 1.5rem 1.75rem; border-left: 4px solid var( --gg-accent ); border-radius: 0 10px 10px 0; background-color: #ffffff; box-shadow: 0 10px 30px rgba( 43, 27, 58, 0.07 ); font-size: 1.2rem; font-weight: 600; line-height: 1.55; } .wpis__tresc blockquote p:last-child { margin-bottom: 0; } .wpis__tresc figure { margin: clamp( 2rem, 3vw, 2.5rem ) 0; } .wpis__tresc figure img { display: block; width: 100%; border-radius: 10px; background-color: var( --wp--preset--color--muted ); } .wpis__tresc figcaption { margin-top: 0.75rem; font-size: 14px; font-weight: 500; color: #6b5a7a; } /* Tabela zawsze w swoim kontenerze - na telefonie przewija się poziomo. */ .wpis__tresc .wp-block-table { overflow-x: auto; } .wpis__tresc table { width: 100%; border-collapse: collapse; background-color: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba( 43, 27, 58, 0.07 ); font-size: 1rem; } .wpis__tresc th, .wpis__tresc td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var( --wp--preset--color--muted ); } .wpis__tresc thead th { background-color: var( --wp--preset--color--primary ); color: var( --wp--preset--color--base ); font-weight: 700; }