/* ===================================================================== global4.css — aleMotocykl.pl · CSS wszystkich stron (wpis w ) v4 vs v3 (= global3.css z serwera, sprawdzony 13 X 2026): TYLKO przycisk „Zapytaj AI" w pasku menu (sekcja 2b) bez widocznej ramki — ramka przezroczysta, wymiary bez zmian, żeby nie konkurował z „DOBIERZ CZĘŚCI PO MODELU". Reszta pliku bez zmian. ⚠️ ZASTĘPUJE global3.css — w panelu podmień href, nie ładuj obu. v3 vs v2 (= global2.css z serwera, sprawdzony 1 X 2026): TYLKO nowa sekcja 2c — układ paska menu: przyciski z lewej, Kontakt przy prawej krawędzi. Reszta pliku bez zmian. v2 vs v1 (= global1.css z serwera, sprawdzony 1 X 2026): TYLKO nowa sekcja 2b — wygląd „DOBIERZ CZĘŚCI PO MODELU" i „ASYSTENT AI" w pasku menu. Reszta pliku bez zmian. Wpis GoShop: Wszystkie strony / Sekcja / priorytet -100 Scala dotychczasowe wpisy: zmiana fontu czcionki, baner główna, 2 newsy na mobilu, sociale przerwy, Padding trustedshops, Ikony w stopce 7 sztuk + ikony stopka 8-14 + ikona stopka blok3, Odstąp tutaj - kolor link + CSS z dobierz-czesci4.js i bestsellery-wyrownanie.js. POMINIĘTE: ZEGAR css (w buybox1.js), Powiększenie ceny (w karta.css), CSS koszyk licznik (.darmowadostawa199 — darmowa7_u.js używa innych klas). ===================================================================== */ /* ---------- 1. Typografia ---------- */ body, p, a, li, span, div, input, button, h1, h2, h3, h4, h5, h6, .price, .product-name, .product-hover { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6, .price { font-weight: 700 !important; text-transform: uppercase; } .product-name, .product-hover { font-weight: 500 !important; text-transform: none !important; } /* ---------- 2. Nagłówek: hamburger, socials, trustbadge, menu „DOBIERZ CZĘŚCI" ---------- */ .tree-top-hover { display: flex !important; align-items: center !important; white-space: nowrap !important; } .tree-top-hover-hamburger { margin-right: 15px !important; position: static !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 14px !important; width: 20px !important; flex-shrink: 0 !important; } .tree-top-hover-hamburger span, .tree-top-hover-hamburger::before, .tree-top-hover-hamburger::after { display: block !important; width: 100% !important; height: 2px !important; background: #fff !important; } .socials-wrapper { display: flex; gap: 14px !important; justify-content: flex-end; } .socials-wrapper a { display: flex; align-items: center; justify-content: center; padding: 2px; } .tm-dodo2 { padding-top: 10px; } /* „DOBIERZ CZĘŚCI…" jako pomarańczowy outline-pill (z dobierz-czesci4.js) */ li[title^="DOBIERZ CZĘŚCI"] { display: flex !important; align-items: center !important; } li[title^="DOBIERZ CZĘŚCI"] > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; height: auto !important; background: transparent !important; color: #ff7a4d !important; border: 1.5px solid #ff5a28 !important; border-radius: 8px !important; padding: 8px 16px !important; font-weight: 700 !important; line-height: 1.1 !important; white-space: nowrap !important; transition: background .15s ease, color .15s ease, border-color .15s ease !important; } li[title^="DOBIERZ CZĘŚCI"] > a:hover { background: #ff5a28 !important; color: #fff !important; border-color: #ff5a28 !important; } /* ---------- 2b. Pasek menu (desktop): styl przycisków DOBIERZ CZĘŚCI i ASYSTENT AI (v2) ---------- Zmieniamy WYŁĄCZNIE wygląd (kolory, tło, ramka, ikona). Rozmiar czcionki, grubość, odstępy wewnętrzne, ramka 1,5 px i zaokrąglenie 8 px — takie same jak dotychczasowy przycisk z sekcji 2. Dotyczy tylko paska .mainmenu; kopia menu w mobilnej szufladzie zostaje bez zmian. Kreska-separator motywu (a::after) w przyciskach schowana; po prawej Asystenta rysuje ją li::after. */ /* DOBIERZ CZĘŚCI PO MODELU — wypełniony pomarańczowy + biała ikona motocykla */ .mainmenu > li[title^="DOBIERZ CZĘŚCI"] > a { gap: 8px !important; background: #ea5b1d !important; color: #fff !important; border-color: #ea5b1d !important; } .mainmenu > li[title^="DOBIERZ CZĘŚCI"] > a::before { content: ""; display: block; flex: none; width: 22px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.6 3.3 15.6 11.4' fill='none' stroke='%23fff' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='11.4' r='2.8'/%3E%3Ccircle cx='12.8' cy='11.4' r='2.8'/%3E%3Cpath d='M2.8 5.6 L5.6 7 C6.7 6 7.8 5.7 8.9 5.9 C10.1 6.1 10.9 6.6 11.4 7.4'/%3E%3Cpath d='M10.2 4.4 C12.2 3.8 13.9 4.7 14.5 6.4 C14.8 7.3 14.4 8.1 13.6 8.4'/%3E%3Cpath d='M10.8 6.6 L12.7 11.1'/%3E%3Cpath d='M4.2 11.2 L6.6 8.4 L9.4 8.4'/%3E%3C/svg%3E") no-repeat center / contain; } .mainmenu > li[title^="DOBIERZ CZĘŚCI"] > a:hover { background: #ff6a2c !important; border-color: #ff6a2c !important; color: #fff !important; } .mainmenu > li[title^="DOBIERZ CZĘŚCI"] > a::after { display: none !important; } /* ASYSTENT AI — miętowa ramka + logo „ai" (/dane/cms/al-nav-zielona.svg). Czcionka bez zmian (rozmiar i grubość z motywu); wymiary ramki jak w przycisku DOBIERZ. Selektor po tytule z panelu ORAZ po linku #al-czat, gdyby tytuł się zmienił. */ .mainmenu > li[title="Asystent AI"], .mainmenu > li:has(> a[href$="#al-czat"]) { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .mainmenu > li[title="Asystent AI"] > a, .mainmenu > li > a[href$="#al-czat"] { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: auto !important; white-space: nowrap !important; line-height: 1.1 !important; padding: 8px 16px !important; border: 1.5px solid transparent !important; border-radius: 8px !important; /* v4: ramka niewidoczna (była #50ae93) */ background: transparent !important; color: #5ec4a6 !important; transition: background .15s ease, color .15s ease !important; } .mainmenu > li[title="Asystent AI"] > a::before, .mainmenu > li > a[href$="#al-czat"]::before { content: ""; display: block; flex: none; width: 26px; height: 16px; background: url("https://alemotocykl.pl/dane/cms/al-nav-zielona.svg") no-repeat center / contain; } .mainmenu > li[title="Asystent AI"] > a:hover, .mainmenu > li > a[href$="#al-czat"]:hover { background: rgba(80,174,147,.14) !important; color: #7ad6bb !important; } .mainmenu > li[title="Asystent AI"] > a::after, .mainmenu > li > a[href$="#al-czat"]::after { display: none !important; } .mainmenu > li[title="Asystent AI"]::after, .mainmenu > li:has(> a[href$="#al-czat"])::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 26px; margin-top: -13px; background: #fff; opacity: .1; pointer-events: none; } /* ---------- 2c. Układ paska menu (desktop): przyciski z lewej, reszta do prawej (v3) ---------- Motyw rozkłada pozycje równo (justify-content: space-around, li flex-grow) — przy 3 pozycjach Asystent wisiał na środku. Teraz: DOBIERZ + ASYSTENT obok siebie z lewej, wszystko PO Asystencie (dziś: Kontakt) dosunięte do prawej. Rozmiary czcionek i przycisków bez zmian. */ .mainmenu { justify-content: flex-start !important; gap: 18px; } .mainmenu > li { flex: 0 0 auto !important; } /* pierwsza pozycja za Asystentem odpycha się do prawej (margin-left: auto) — kolejne idą za nią */ .mainmenu > li[title="Asystent AI"] + li, .mainmenu > li:has(> a[href$="#al-czat"]) + li { margin-left: auto !important; } /* pozycje tekstowe po prawej: odstęp od kreski-separatora motywu (gdyby było ich kilka) */ .mainmenu > li[title="Asystent AI"] ~ li > a, .mainmenu > li:has(> a[href$="#al-czat"]) ~ li > a { padding: 0 18px !important; } /* separator po Asystencie zbędny — rolę separatora przejmuje pusta przestrzeń */ .mainmenu > li[title="Asystent AI"]::after, .mainmenu > li:has(> a[href$="#al-czat"])::after { display: none !important; } /* ---------- 3. Strona główna ---------- */ /* baner: wspólne tło + dwie kolumny */ .main-banner-wrapper { position: relative; display: grid; grid-template-columns: 2fr 1fr; align-items: stretch; gap: 0; overflow: hidden; } .main-banner-wrapper::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #ffd200 0%, #ffd200 60%, #111111 60%, #111111 100%); z-index: 0; } .main-banner-wrapper .swiper-container, .main-banner-wrapper .main-greeting { position: relative; z-index: 1; background: transparent; } .main-banner-wrapper .banner-img-wrapper, .main-banner-wrapper .banner-img-wrapper img { width: 100%; height: 100%; display: block; object-fit: cover; } .main-greeting { color: #fff; padding: 32px; } @media (max-width: 991px) { .main-banner-wrapper { display: block; } .main-banner-wrapper::before { background: none; } .main-greeting { background: #111111 !important; color: #fff; padding: 10px 20px 20px 20px; border-radius: 12px; margin-top: 12px; } } /* newsy: 3 w rzędzie, 2 na mobile */ .news-banner-wrapper { display: flex; flex-wrap: wrap; gap: 16px; } .news-article { flex: 1 1 calc(33.33% - 16px); box-sizing: border-box; } @media (max-width: 768px) { .news-article { flex: 1 1 calc(50% - 16px); } } /* slidery produktów: nazwa zawsze 2 linie → przyciski „Kup" na jednej wysokości (z bestsellery-wyrownanie.js) */ .main-page-products-wrapper .product .product-name { min-height: 72px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- 4. Stopka: ikony przy linkach ---------- */ ul.footer li a { display: inline-flex; align-items: center; } ul.footer li a::before { content: ""; display: none; width: 18px; height: 18px; margin-right: 8px; background-color: #ffffff !important; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transform: translateY(1px); } ul.footer li a[href*="kontakt"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/kontakt.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/kontakt.svg'); } ul.footer li a[href*="tiktok"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/tiktok.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/tiktok.svg'); } ul.footer li a[href*="facebook"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/fb.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/fb.svg'); } ul.footer li a[href*="koszt-wysylki"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/dostawa.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/dostawa.svg'); } ul.footer li a[href*="12-lat"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/historia.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/historia.svg'); } ul.footer li a[href*="regulamin-sklepu"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/regulamin.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/regulamin.svg'); } ul.footer li a[href*="instrukcja"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/instrukcje.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/instrukcje.svg'); } ul.footer li a[href*="wiadomosci"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/news.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/news.svg'); } ul.footer li a[href*="poradnik-motocyklisty"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/poradnik.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/poradnik.svg'); } ul.footer li a[href*="polityka-prywatnosci"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/prywartnosc.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/prywartnosc.svg'); } ul.footer li a[href*="reklamacje-i-gwarancja"]::before{ content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/reklamacje.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/reklamacje.svg'); } ul.footer li a[href*="twoje-zakupy"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/trusted.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/trusted.svg'); } ul.footer li a[href*="zwroty-i-reklamacje"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/zwroty.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/zwroty.svg'); } ul.footer li a[href*="youtube"]::before { content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/yt.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/yt.svg'); } ul.footer li a[href*="opinie-o-alemotocyklpl"]::before{ content: ""; display: inline-block; -webkit-mask-image: url('https://alemotocykl.pl/dane/cms/opinie.svg'); mask-image: url('https://alemotocykl.pl/dane/cms/opinie.svg'); } /* ---------- 5. Menu / linki ---------- */ li[title="Odstąp od umowy tutaj"] > a { color: #ff6600 !important; font-weight: 700 !important; } li[title="Odstąp od umowy tutaj"] > a:hover { color: #ff8533 !important; text-decoration: underline !important; }