/* ============================================================ e-parts.pl — app.css v1.0 Ładuje się PO: bootstrap.min.css, stylesheet.css, modern.css Używa selektora #app dla wyższego specificity. Zmienne CSS zdefiniowane w modern.css (:root) są dostępne tutaj. ============================================================ */ /* ---- Specificity anchor ---- */ /* Dodaj id="app" do w header.php (lub body tag) */ /* ============================================================ LAYOUT — Strona główna ============================================================ */ /* Hero / wybór pojazdu */ #app #wybor_auta_tlo, #wybor_auta_tlo { background: linear-gradient(135deg, var(--ea-nav-bg) 0%, #1a3a6b 100%); color: #fff; padding: 2.5rem 0 2rem; } /* Tytuł w sekcji wyboru pojazdu */ #wybor_auta_tlo h1, #wybor_auta_tlo h2, #wybor_auta_tlo .h1, #wybor_auta_tlo .h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; color: #fff; margin-bottom: 1rem; } /* ============================================================ KOMPONENTY — Selektor pojazdu (car selector) ============================================================ */ #app .car-selector-form .form-control, #wybor_auta_tlo .form-control, #wybor_auta_tlo select { height: 42px; border-radius: var(--ea-radius) !important; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; font-size: 0.9rem; } #wybor_auta_tlo .form-control::placeholder { color: rgba(255,255,255,.55); } #wybor_auta_tlo .form-control:focus { background: rgba(255,255,255,.2); border-color: var(--ea-accent); box-shadow: 0 0 0 3px rgba(250,112,1,.25); color: #fff; } #wybor_auta_tlo .btn-warning, #wybor_auta_tlo .btn-szukaj { background: var(--ea-accent); border-color: var(--ea-accent); color: #fff; font-weight: 600; height: 42px; border-radius: var(--ea-radius) !important; transition: background .15s, transform .1s; } #wybor_auta_tlo .btn-warning:hover, #wybor_auta_tlo .btn-szukaj:hover { background: var(--ea-accent-dark); border-color: var(--ea-accent-dark); transform: translateY(-1px); } /* ============================================================ KOMPONENTY — Karty kategorii na stronie głównej ============================================================ */ .ea-category-card { border: 1px solid var(--ea-border); border-radius: var(--ea-radius); background: var(--ea-white); padding: 1rem; text-align: center; transition: box-shadow .2s, transform .15s; text-decoration: none; color: var(--ea-text); display: block; } .ea-category-card:hover { box-shadow: var(--ea-shadow); transform: translateY(-2px); color: var(--ea-primary); text-decoration: none; } .ea-category-card img { max-height: 64px; margin-bottom: .5rem; } .ea-category-card .ea-category-name { font-size: 0.85rem; font-weight: 600; } /* ============================================================ KOMPONENTY — Karty produktów (listing) ============================================================ */ .ea-product-card { border: 1px solid var(--ea-border); border-radius: var(--ea-radius); background: var(--ea-white); overflow: hidden; transition: box-shadow .2s, transform .15s; height: 100%; display: flex; flex-direction: column; } .ea-product-card:hover { box-shadow: var(--ea-shadow); transform: translateY(-2px); } .ea-product-card__img { width: 100%; height: 160px; object-fit: contain; padding: .75rem; background: #fafafa; } .ea-product-card__body { padding: .75rem 1rem; flex: 1; display: flex; flex-direction: column; } .ea-product-card__name { font-size: 0.88rem; font-weight: 600; color: var(--ea-text); margin-bottom: .25rem; flex: 1; } .ea-product-card__price { font-size: 1.1rem; font-weight: 700; color: var(--ea-primary); margin-bottom: .5rem; } .ea-product-card__brand { font-size: 0.78rem; color: var(--ea-muted); margin-bottom: .5rem; } .ea-product-card__btn { width: 100%; font-size: 0.85rem; padding: 6px 12px; } /* Cena — styl globalny dla osCommerce */ .productSpecialPrice, .productSpecialPriceAmount { color: #dc2626; font-weight: 700; } .productPriceAmount { font-weight: 700; color: var(--ea-primary); } .normalprice { color: var(--ea-muted); text-decoration: line-through; font-size: 0.88em; } /* ============================================================ KOMPONENTY — Tablica filtrów / sidebar ============================================================ */ #app .naglowek-pojazd, .naglowek-pojazd { background: var(--ea-nav-bg); color: #fff; padding: 8px 14px; font-size: 0.88rem; font-weight: 600; border-radius: var(--ea-radius) var(--ea-radius) 0 0; } /* ============================================================ KOMPONENTY — Formularze ============================================================ */ #app .form-control { border-color: var(--ea-border); border-radius: var(--ea-radius) !important; font-size: 0.88rem; } #app .form-control:focus { border-color: var(--ea-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.1); } #app label { font-size: 0.85rem; font-weight: 500; color: var(--ea-text); } /* ============================================================ STRONA — Karta produktu (product_info.php) ============================================================ */ .ea-product-detail__name { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; color: var(--ea-text); line-height: 1.3; } .ea-product-detail__price-main { font-size: 1.6rem; font-weight: 700; color: var(--ea-primary); } .ea-product-detail__price-old { font-size: 0.95rem; color: var(--ea-muted); text-decoration: line-through; } .ea-product-detail__sku { font-size: 0.8rem; color: var(--ea-muted); } .ea-product-detail__badges .badge { font-size: 0.75rem; padding: 4px 8px; border-radius: 20px; font-weight: 500; } .ea-add-to-cart-btn { background: var(--ea-accent) !important; border-color: var(--ea-accent) !important; font-size: 1rem; font-weight: 600; padding: 10px 28px; border-radius: var(--ea-radius) !important; transition: background .15s, box-shadow .15s, transform .1s; } .ea-add-to-cart-btn:hover { background: var(--ea-accent-dark) !important; border-color: var(--ea-accent-dark) !important; box-shadow: 0 4px 12px rgba(250,112,1,.35) !important; transform: translateY(-1px); } /* Tabela parametrów technicznych */ .ea-specs-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .ea-specs-table tr:nth-child(even) { background: var(--ea-bg); } .ea-specs-table td { padding: 7px 12px; border-bottom: 1px solid var(--ea-border); vertical-align: top; } .ea-specs-table td:first-child { font-weight: 500; color: var(--ea-muted); width: 40%; } /* ============================================================ STRONA — Koszyk (shopping_cart.php) ============================================================ */ .ea-cart-item { border-bottom: 1px solid var(--ea-border); padding: 12px 0; } .ea-cart-item:last-child { border-bottom: none; } .ea-cart-item__img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--ea-border); border-radius: var(--ea-radius); padding: 4px; } .ea-cart-item__name { font-size: 0.9rem; font-weight: 500; } .ea-cart-item__price { font-size: 1rem; font-weight: 700; color: var(--ea-primary); } .ea-cart-summary { background: var(--ea-bg); border: 1px solid var(--ea-border); border-radius: var(--ea-radius); padding: 1rem 1.25rem; } .ea-cart-summary__total { font-size: 1.25rem; font-weight: 700; color: var(--ea-text); } /* ============================================================ UTILITI — Pomocnicze klasy ============================================================ */ .ea-badge-new { background: #22c55e; color: #fff; } .ea-badge-sale { background: #ef4444; color: #fff; } .ea-badge-promo { background: var(--ea-accent); color: #fff; } .ea-divider { border: none; border-top: 1px solid var(--ea-border); margin: 1.25rem 0; } .ea-text-price { color: var(--ea-primary); font-weight: 700; } .ea-text-muted { color: var(--ea-muted); } .ea-text-accent { color: var(--ea-accent); } /* Responsywne ukrycie na mobile */ @media (max-width: 767px) { .ea-hide-mobile { display: none !important; } .ea-product-card__img { height: 120px; } .ea-product-detail__price-main { font-size: 1.3rem; } } /* ============================================================ OVERRIDES — Naprawki specificity dla starych klas osCommerce ============================================================ */ /* Stara klasa .naglowek z stylesheet.css ma background:#777F86 — ignorujemy ją dla nowych elementów, zachowując dla starych */ #app .naglowek-sekcja { background: var(--ea-nav-bg); color: #fff; padding: 8px 14px; font-size: 0.88rem; font-weight: 600; } /* Stare tabele osCommerce wewnątrz #app — unowocześnienie */ #app table.infoBox { border: 1px solid var(--ea-border); border-radius: var(--ea-radius); } #app .smallText { font-size: 0.82rem; color: var(--ea-muted); } #app .pageHeading { font-size: 1.2rem; font-weight: 700; color: var(--ea-text); } #app .main { font-size: 0.9rem; } /* Paginacja */ #app .pagenav a, #app .pageResults { font-size: 0.82rem; color: var(--ea-primary); } /* ================================================================ PRODUKT — strona produktu (product_info.php) ================================================================ */ /* Panel cenowy (prawa kolumna produktu) */ .ea-product-price-panel { background: linear-gradient(135deg, #f8fafd 0%, #ffffff 100%); border: 1px solid var(--ea-border); border-radius: var(--ea-radius); padding: 16px !important; box-shadow: var(--ea-shadow-sm); } /* Cena na stronie produktu — standardowa */ .ea-product-price-panel .productPriceAmount, .ea-product-price-panel span[itemprop="price"] { font-size: 1.6rem !important; font-weight: 700 !important; color: var(--ea-primary) !important; } /* Przyciski qty +/- */ .ea-product-price-panel #minus, .ea-product-price-panel #plus { background: var(--ea-white) !important; border-color: var(--ea-border) !important; color: var(--ea-primary) !important; } .ea-product-price-panel #minus:hover, .ea-product-price-panel #plus:hover { background: var(--ea-primary-light) !important; border-color: var(--ea-primary) !important; } .ea-product-price-panel #qty { text-align: center; font-weight: 600; width: 3rem !important; max-width: 3rem !important; } /* "Do koszyka" - btn przycisk dodania */ .ea-add-to-cart-btn { background: var(--ea-accent) !important; border-color: var(--ea-accent) !important; color: #fff !important; font-weight: 700; font-size: 1.05rem !important; letter-spacing: .02em; padding: 12px 20px !important; border-radius: var(--ea-radius) !important; transition: background .15s, box-shadow .15s, transform .1s; cursor: pointer; } .ea-add-to-cart-btn:hover { background: var(--ea-accent-dark) !important; border-color: var(--ea-accent-dark) !important; box-shadow: 0 4px 16px rgba(250,112,1,.35) !important; transform: translateY(-1px); color: #fff !important; } /* Info dostawa + odbiór osobisty */ .ea-product-price-panel .ml-auto { font-size: 0.82rem; color: var(--ea-muted); } .ea-product-price-panel .ml-auto a { color: var(--ea-primary); } /* H1 na stronie produktu */ .col-xl-9 .card h1 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 700; color: var(--ea-text); line-height: 1.3; margin-bottom: 0.25rem; } .col-xl-9 .card h2 { font-size: 0.95rem; font-weight: 500; color: var(--ea-muted); } /* Tabs produktu (zastosowanie, opis, opinie) */ .tab-panels .tabs { border-bottom: 2px solid var(--ea-border); padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; } .tab-panels .tabs li { padding: 8px 16px; cursor: pointer; font-size: 0.88rem; font-weight: 500; border-radius: var(--ea-radius) var(--ea-radius) 0 0; color: var(--ea-muted); border: 1px solid transparent; transition: color .15s, background .15s; } .tab-panels .tabs li.active, .tab-panels .tabs li:hover { color: var(--ea-primary); background: var(--ea-primary-light); border-color: var(--ea-border); } /* ---- Dostawa na produkcie ---- */ .loader, .loader_ { display: flex; align-items: center; } .arrows-wrap { display: flex; align-items: center; gap: 8px; }