/* * Nadpisania dla motywu TwojStart. * Belka nawigacji ma zawsze mieć pełne tło (tak jak dawniej tylko po * przewinięciu) — position:fixed sprawia, że header jest zawsze widoczny, * a klasa .is-sticky (przełączana w custom.js) dokłada tylko cień. */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background-color: #272653; transition: background-color 0.3s ease; } .navbar.is-sticky { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); } /* Na mobilnych logo + nazwa + hamburger nie mieszczą się w jednym rzędzie, gdy pod nazwą jest jeszcze długi podtytuł (motto witryny) — chowamy go poniżej tego breakpointu, zostaje logo + nazwa + przycisk menu. */ @media (max-width: 767.98px) { .navbar-brand-text small { display: none; } } /* GeneratePress dogrywa WŁASNY, dynamicznie generowany arkusz (generate-style-css) PO naszym pliku — jego domyślne jasnoszare tło (#f7f8f9) wygrywa z naszą regułą bez !important. Szablon zakłada czysto białe tło strony, inaczej prześwituje pod przezroczystymi sekcjami (np. About). */ body { background-color: #ffffff !important; } /* Oryginalny szablon centruje kartę z adresem/telefonem (.contact-info-item) absolutnie NAD statycznym obrazkiem mapy (position:absolute + transform). Teraz w tym miejscu jest prawdziwa, interaktywna mapa Google — karta ma stać normalnie NAD mapą, a nie się na niej centrować. */ .contact-info-item { position: static; top: auto; left: auto; transform: none; margin-bottom: 20px; } /* Logo z Customizera (Wygląd → Personalizacja → Identyfikacja witryny) */ .navbar-brand-image .custom-logo-link, .navbar-brand-image img { display: block; width: 48px; height: 48px; object-fit: contain; } /* Logo w stopce (ACF → Ustawienia motywu → Stopka) — osobna klasa, żeby nie łapać reguły .navbar-brand-image { width:48px; height:48px } z oryginalnego szablonu. Domyślny rozmiar poniżej, nadpisywany inline stylem z ACF gdy ustawisz własną szerokość/wysokość. */ .footer-logo-image { display: block; width: 48px; height: 48px; max-width: 100%; object-fit: contain; } /* Szerokość ustawiona w ACF (inline style) jest sztywnym pikselem, ale kontener na mobilnych bywa węższy — obrazek się ściska, a WYSOKOŚĆ (też sztywna, z inline style) zostaje bez zmian, więc wygląda na rozciągnięty/zniekształcony. Na małych ekranach liczymy wysokość z proporcji zamiast trzymać się sztywnej wartości z ACF. */ @media (max-width: 767.98px) { .footer-logo-image { height: auto !important; } } /* Oryginalny szablon ustawia .navbar-brand { max-width: 48px } — to dodatkowo ściska CAŁY link (razem z logo) do 48px, niezależnie od rozmiaru samego obrazka. Usuwamy ten limit, żeby własne wymiary logo (nagłówek i stopka) faktycznie działały. */ .navbar-brand, .navbar-brand:hover { max-width: none; } /*--------------------------------------- GALERIA ------------------------------------------*/ .gallery-item img { border-radius: var(--border-radius-medium, 20px); width: 100%; height: 260px; object-fit: cover; } .gallery-item-caption { color: var(--white-color, #fff); opacity: 0.85; font-size: 0.9rem; } /* Powiększanie zdjęć kliknięciem — tylko desktop, patrz assets/js/custom.js */ @media (min-width: 992px) { .gallery-zoom-img { cursor: zoom-in; } } .gallery-lightbox-inner { position: relative; align-self: center; max-width: 100%; } .gallery-lightbox-image { max-height: 85vh; width: auto; max-width: 100%; margin: 0 auto; display: block; } .gallery-lightbox-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.75rem; height: 2.75rem; background-color: rgba(0, 0, 0, 0.7) !important; background-size: 1.1rem; border-radius: 50%; opacity: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); z-index: 5; } .gallery-lightbox-close:hover, .gallery-lightbox-close:focus { background-color: rgba(0, 0, 0, 0.9) !important; opacity: 1; } /*--------------------------------------- CECHY / DLACZEGO MY ------------------------------------------*/ .feature-block { background: #eaeaea; border-radius: var(--border-radius-medium); padding: 40px 25px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .feature-block h4 { color: #272653; font-weight: 500 !important; } .feature-block p { color: var(--p-color); font-size: 15px; } /*--------------------------------------- FALKI (dekoracyjne kształty sekcji) — prawdziwe elementy