/* ===================================================================== global.css — aleMotocykl.pl · CSS wszystkich stron (JEDEN wpis „Kod CSS") 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; } /* ---------- 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; }