/* ============================================================================= * STRADO — custom.css * Wspólny dla strado.pl i strado-tech.pl (jeden szablon = jeden arkusz). * Różnice per sklep przez html[data-shop] — patrz sekcja 1. * * SPIS TREŚCI * 1. Motyw i zmienne (per sklep) * 2. Ukryte elementy * 3. Layout i header * 4. Ceny * 5. Karta produktu — opis rozszerzony * 6. Multipack * 7. Sticky basket bar * 8. Fast delivery — ribbon * 9. Koszyk — rekomendacje * 10. Pozostałe * ========================================================================== */ /* ============================================================================= 1. MOTYW I ZMIENNE ----------------------------------------------------------------------------- Atrybut data-shop ustawia sticky-basket-v2.js (setShopFlag) na podstawie hostname. Żeby uniknąć mignięcia niebieskim na strado-tech, wrzuć snippet z README do — wtedy atrybut jest przed pierwszym malowaniem. Brak atrybutu = domyślnie strado.pl. ========================================================================== */ :root { --brand: #2a85c0; --brand-dark: #1f6694; --brand-soft: #eaf3fa; --brand-border: #a9cfe8; --urgent: #ea580c; --urgent-bg: #fff7ed; --urgent-border: #fed7aa; --urgent-text: #7c2d12; --ink: #1a1a1a; --ink-soft: #7a7f85; --ink-faint: #a2a7ad; --line: #e3e5e8; --line-faint: #eef2f5; --slate-900: #0f172a; --slate-800: #1e293b; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-200: #e2e8f0; --slate-50: #f8fafc; --save: #c2410c; } html[data-shop="tech"] { --brand: #64738b; --brand-dark: #4a566b; --brand-soft: #eff1f4; --brand-border: #c3cad6; } /* ============================================================================= 2. UKRYTE ELEMENTY ----------------------------------------------------------------------------- UWAGA: w poprzedniej wersji dwie reguły były martwe przez nieprawidłowy selektor (wiszące "--links" i ".price --max"). Nieprawidłowy selektor w liście oddzielonej przecinkami unieważnia CAŁĄ regułę, więc .product__notes i kolor Omnibusa nigdy nie działały. Naprawione. ========================================================================== */ .product__notes, .product_name__notes, .product_name__additional, .product_name__firm_logo, .product__traits, #projector_producttraits, #opinions_section, .contact_stocks, #projector_stocks, #projector_amount, .s_unit_converted_price, .projector_prices__unit_converted, .projector_prices__unit_converted_price, #container .price.--convert, .cop_documents, .cop_login, .cop_login__services, .cop_remarks, .shopping_list_menu, .shopping_list_top, #main_producers, #menu_newsletter, #twdSalesbotDummyRootContainer { display: none !important; } /* blok linków w nagłówku produktu (dawniej: selektor z błędem) */ #projector_productname > .product_name__block.--links { display: none !important; } /* ============================================================================= 3. LAYOUT I HEADER ========================================================================== */ #main_cms { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #footer_links .footer-contact__item:before { background-color: #2f2f2f; } @media (min-width: 979px) { #menu_search, .menu_top, #menu_categories { margin-top: 0; } } @media (min-width: 1200px) { #logo { margin-top: 0; } } /* ============================================================================= 4. CENY ========================================================================== */ .price.--main { font-size: 1.6em !important; font-weight: 700 !important; } .omnibus_price, .price.--max { color: #494949 !important; } .omnibus_price__text { font-size: 0.8em; } /* ============================================================================= 5. KARTA PRODUKTU — OPIS ROZSZERZONY ========================================================================== */ #projector_longdescription .template { float: left; display: flex; align-items: center; width: 100%; } #projector_longdescription .section { clear: both; } #projector_longdescription .item-6 { display: table-cell; vertical-align: middle; width: 50%; height: auto; padding: 10px; } #projector_longdescription .item-12 { width: 100%; height: auto; padding: 10px; } #projector_longdescription .item-6 img { width: 100%; height: auto; } #projector_longdescription p, #projector_longdescription li { font-size: 1.15em; line-height: 160%; color: #333; } #projector_longdescription h1, #projector_longdescription h2 { line-height: 180%; color: #333; } #projector_longdescription table { width: 100% !important; } @media (max-width: 600px) { #projector_longdescription .template { display: block; padding: 0; } #projector_longdescription .item-6 { display: block; float: left; width: 100%; } #projector_longdescription .item-6 img { width: 100%; } } /* ============================================================================= 6. MULTIPACK — restyling natywnego komponentu IdoSell (v4) ----------------------------------------------------------------------------- Elementy dokładane przez JS mają prefiks .mpk__ i siedzą POZA natywnym .projector_multipack__wrapper — IdoSell przepisuje ceny po indeksie, więc każdy obcy element w tym wrapperze przesuwa wartości. Siatka: .projector_multipack__tiles (tworzony przez JS) jest gridem, a natywny wrapper dostaje display:contents. Bez JS wrapper działa jako zwykły grid. ========================================================================== */ .projector_multipack { margin: 22px 0 26px; } .projector_multipack__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } /* --- siatka --------------------------------------------------------------- */ .projector_multipack__tiles, .projector_multipack__wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 11px; margin-top: 16px; align-items: stretch; } .projector_multipack__tiles > .projector_multipack__wrapper { display: contents; } /* --- kafelek -------------------------------------------------------------- */ .projector_multipack__item, .mpk__item { position: relative; margin: 0; padding: 0; } .projector_multipack__item .f-control, .mpk__item .mpk__control { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .projector_multipack__item .f-label:before, .projector_multipack__item .f-label:after { display: none !important; content: none !important; } .projector_multipack__item .f-label, .mpk__item .mpk__label { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 0 6px; height: 100%; min-height: 0; margin: 0; padding: 20px 12px 15px; text-align: center; text-indent: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; } .projector_multipack__item .f-label:hover, .mpk__item .mpk__label:hover { border-color: var(--brand-border); background: var(--brand-soft); } .projector_multipack__item .f-control:focus-visible + .f-label, .mpk__item .mpk__control:focus-visible + .mpk__label { outline: 2px solid var(--brand); outline-offset: 2px; } .projector_multipack__item .f-control:checked + .f-label, .mpk__item .mpk__control:checked + .mpk__label { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); } /* --- linia 1: ilość + procent --------------------------------------------- */ .projector_multipack__from, .mpk__from { order: 1; font-size: 17px; font-weight: 700; line-height: 1.15; color: var(--ink); } .projector_multipack__unit, .mpk__unit { order: 2; margin-left: -3px; font-size: 13px; font-weight: 600; color: var(--ink); } .projector_multipack__literal { display: none !important; } .projector_multipack__percent { order: 3; align-self: center; margin-left: 2px; padding: 2px 8px; font-size: 11px; font-weight: 700; line-height: 16px; color: #fff; background: var(--brand); border-radius: 8px; } .projector_multipack__percent:before { content: '\2212'; } .projector_multipack__percent:after { content: '%'; } /* --- linia 2: cena jednostkowa -------------------------------------------- */ .projector_multipack__price, .mpk__price { order: 4; flex: 0 0 100%; margin-top: 9px; font-size: 12px; line-height: 1.3; color: var(--ink-soft); } .projector_multipack__price:after, .mpk__price:after { content: ' / szt.'; font-size: 11px; color: var(--ink-faint); } /* --- linie 3 i 4: kwoty dokładane przez JS -------------------------------- */ .mpk__total { order: 5; flex: 0 0 100%; margin-top: 7px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); } .mpk__save { order: 6; flex: 0 0 100%; margin-top: 4px; font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--save); } /* --- badge ---------------------------------------------------------------- */ .mpk__badge { position: absolute; top: -10px; left: 50%; z-index: 2; max-width: calc(100% - 10px); transform: translateX(-50%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 2px 9px; font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; background: var(--ink); border-radius: 9px; } /* --- kafelek "1 szt." ----------------------------------------------------- */ .mpk__item.--single .mpk__label { background: #fbfbfc; } .mpk__item.--single .mpk__control:checked + .mpk__label { background: var(--brand-soft); } .mpk__note { order: 5; flex: 0 0 100%; margin-top: 7px; font-size: 11px; line-height: 1.3; color: var(--ink-faint); } /* --- mobile --------------------------------------------------------------- */ @media (max-width: 520px) { .projector_multipack { margin: 18px 0 22px; } .projector_multipack__tiles, .projector_multipack__wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 15px; } .projector_multipack__item .f-label, .mpk__item .mpk__label { padding: 18px 6px 12px; gap: 0 4px; border-radius: 10px; } .projector_multipack__from, .mpk__from { font-size: 15px; } .projector_multipack__unit, .mpk__unit { font-size: 12px; margin-left: -2px; } .projector_multipack__percent { margin-left: 1px; padding: 1px 6px; font-size: 10px; } .projector_multipack__price, .mpk__price { font-size: 11px; margin-top: 7px; } .projector_multipack__price:after, .mpk__price:after { content: '/szt.'; } .mpk__total { font-size: 13px; margin-top: 5px; } .mpk__save { font-size: 10px; margin-top: 3px; } .mpk__note { font-size: 10px; margin-top: 5px; } .mpk__badge { font-size: 9px; padding: 1px 7px; line-height: 15px; } } @media (prefers-reduced-motion: reduce) { .projector_multipack__item .f-label, .mpk__item .mpk__label { transition: none; } } /* ============================================================================= 7. STICKY BASKET BAR ----------------------------------------------------------------------------- Markup tworzy sticky-basket-v2.js. Belka jest ukryta do momentu, aż JS nada klasę --visible, więc nie mignie przed inicjalizacją. ========================================================================== */ .sbb { position: fixed; bottom: 0; left: 0; z-index: 9999; display: none; width: 100%; box-sizing: border-box; background: #fff; border-top: 2px solid var(--brand); box-shadow: 0 -2px 10px rgba(0, 0, 0, .15); } .sbb.--visible { display: block; } .sbb * { box-sizing: border-box; } .sbb__inner { display: flex; align-items: stretch; max-width: 1200px; margin: 0 auto; } .sbb__info { display: flex; flex-direction: column; justify-content: center; width: 50%; padding: 8px 14px; border-right: 1px solid var(--line-faint); } .sbb__price { font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; } .sbb__ship { margin-top: 2px; font-size: 11px; color: #888; } .sbb__ship.--free { color: #2e7d32; } .sbb__delivery { margin-top: 3px; font-size: 11px; color: var(--brand); } .sbb__action { display: flex; align-items: center; width: 50%; padding: 10px 14px; } .sbb__btn { width: 100%; padding: 13px 10px; font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff; background: var(--brand); border: none; border-radius: 6px; cursor: pointer; transition: background-color .14s ease; } .sbb__btn:hover { background: var(--brand-dark); } .sbb__btn:active { transform: translateY(1px); } .sbb__btn:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; } /* na mobile belka jest stale widoczna — oddaj jej miejsce na dole strony */ body.sbb-active { padding-bottom: 82px; } @media (max-width: 400px) { .sbb__price { font-size: 17px; } .sbb__btn { padding: 12px 6px; font-size: 13px; } .sbb__info { padding: 7px 10px; } .sbb__action { padding: 8px 10px; } } @media (prefers-reduced-motion: reduce) { .sbb__btn { transition: none; } .sbb__btn:active { transform: none; } } /* ============================================================================= 8. FAST DELIVERY — ribbon pełnoekranowy ========================================================================== */ .fast_delivery_15 { display: block; width: 100vw; margin: 10px calc(50% - 50vw); padding: 11px 16px; box-sizing: border-box; font-size: 13.5px; line-height: 1.4; text-align: center; color: var(--slate-700); background: var(--slate-50); border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); } .fast_delivery_15 * { box-sizing: border-box; } .fast_delivery_15__inner { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 1200px; } .fast_delivery_15__icon { flex-shrink: 0; display: inline-flex; width: 20px; height: 20px; color: var(--brand); } .fast_delivery_15__icon svg { width: 100%; height: 100%; } .fast_delivery_15__timer { display: inline-block; margin: 0 4px; padding: 3px 9px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; white-space: nowrap; color: #fff; background: var(--brand); border-radius: 6px; } .fast_delivery_15__day { font-weight: 800; letter-spacing: .3px; white-space: nowrap; color: var(--brand); } .fast_delivery_15--urgent { color: var(--urgent-text); background: var(--urgent-bg); border-top-color: var(--urgent-border); border-bottom-color: var(--urgent-border); } .fast_delivery_15--urgent .fast_delivery_15__icon, .fast_delivery_15--urgent .fast_delivery_15__day { color: var(--urgent); } .fast_delivery_15--urgent .fast_delivery_15__timer { background: var(--urgent); animation: fdPulse 1.1s ease-in-out infinite; } @keyframes fdPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } @media (max-width: 600px) { .fast_delivery_15 { padding: 9px 12px; font-size: 12.5px; } .fast_delivery_15__icon { width: 17px; height: 17px; } .fast_delivery_15__timer { padding: 2px 7px; margin: 0 3px; } } @media (prefers-reduced-motion: reduce) { .fast_delivery_15--urgent .fast_delivery_15__timer { animation: none; } } /* ============================================================================= 9. KOSZYK — blok rekomendacji ("Pamiętaj o dokupieniu akcesoriów") ========================================================================== */ .basket .basket__item-recomendation.--recomendations { margin-top: 18px; padding: 16px 18px 6px; background: #fafbfc; border: 1px solid var(--line-faint); border-radius: 12px; } .basket .recomendation-title { margin: 0 0 6px; padding: 0; background: none; } .basket .recomendation-title p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; color: #46535f; background: none !important; text-transform: none !important; } .basket .recomendation-title p::before { content: ""; flex: 0 0 auto; width: 17px; height: 17px; background: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .basket .basket__recomendation.basket__block-recomendation { margin: 0 !important; padding: 12px 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--line-faint) !important; border-radius: 0 !important; } .basket .basket__recomendation.basket__block-recomendation:first-of-type { border-top: 0 !important; } .basket .basket__item-recomendation.--photo img, .basket .photo__link-recomendation img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; } .basket .basket__name_link-recomendation { font-size: 13px; font-weight: 500; line-height: 1.35; color: #2b3640; text-decoration: none; } .basket .basket__name_link-recomendation:hover { text-decoration: underline; } .basket .basket__item-recomendation.--sum .basket__price, .basket .basket__item-recomendation.--sum .sum { font-weight: 600; color: #2b3640; } .basket .basket__item-recomendation.--sum .basket__unit { font-weight: 400; color: #8a96a1; } .basket .basket__recomendation-add, .basket .basket__recomendation-add.btn.--solid { padding: 8px 16px; font-weight: 600; color: var(--brand) !important; background: #fff !important; border: 1.5px solid var(--brand-border) !important; border-radius: 8px; box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .basket .basket__recomendation-add:hover, .basket .basket__recomendation-add.btn.--solid:hover { color: #fff !important; background: var(--brand) !important; border-color: var(--brand) !important; } /* ============================================================================= 10. POZOSTAŁE ========================================================================== */ .trzeci_produkt_karta { padding: 10px; font-size: 1.2em; text-align: center; color: #fff; background: #7ec020; border-radius: 5px; } .trzeci_produkt_karta strong { font-size: 1.5em; }