/* ===================================================================== KARTY ODPORNOŚCI – REDESIGN BIZNESOWY (granatowa identyfikacja) Addytywny arkusz nadpisujący style Hello Elementor + WooCommerce. ===================================================================== */ /* ------------------------------------------------------------------ 1. ZMIENNE / SYSTEM PROJEKTOWY ------------------------------------------------------------------ */ :root { --koz-navy: #0F2A4A; --koz-navy-700: #163A63; --koz-navy-900: #0A1E37; --koz-accent: #E0A341; --koz-accent-700: #C98A28; --koz-bg: #FFFFFF; --koz-bg-soft: #F5F7FA; --koz-text: #1A2330; --koz-muted: #5B6675; --koz-border: #E4E8EE; --koz-radius: 14px; --koz-radius-sm: 10px; --koz-shadow: 0 6px 24px rgba(15, 42, 74, 0.08); --koz-shadow-lg: 0 14px 40px rgba(15, 42, 74, 0.14); --koz-transition: all .25s ease; --koz-font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --koz-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Nadpisanie globalnych zmiennych Elementora (nagłówek/stopka zbudowane w Elementorze) */ .elementor-kit-6 { --e-global-color-primary: #0F2A4A; --e-global-color-secondary: #163A63; --e-global-color-text: #1A2330; --e-global-color-accent: #E0A341; --e-global-typography-primary-font-family: "Plus Jakarta Sans"; --e-global-typography-secondary-font-family: "Plus Jakarta Sans"; --e-global-typography-text-font-family: "Inter"; --e-global-typography-accent-font-family: "Inter"; } /* ------------------------------------------------------------------ 2. TYPOGRAFIA / BAZA ------------------------------------------------------------------ */ body { font-family: var(--koz-font-body); color: var(--koz-text); background: var(--koz-bg); -webkit-font-smoothing: antialiased; line-height: 1.65; } h1, h2, h3, h4, h5, h6, .page-title, .woocommerce-loop-product__title, .product_title { font-family: var(--koz-font-head); color: var(--koz-navy); letter-spacing: -0.01em; line-height: 1.2; } a { color: var(--koz-navy-700); text-decoration: none; transition: var(--koz-transition); } a:hover { color: var(--koz-accent-700); } /* Szerszy, spójny kontener treści sklepu */ .woocommerce-page .site-main, body.woocommerce .site-main { max-width: 920px; margin-inline: auto; padding: 48px 24px 72px; } /* ------------------------------------------------------------------ 3. NAGŁÓWEK (Header Footer Elementor) ------------------------------------------------------------------ */ .ehf-header #masthead, header.site-header { box-shadow: 0 2px 16px rgba(15, 42, 74, 0.06); background: #fff; } /* Linki menu – czarny tekst, bez tła */ .hfe-nav-menu .menu-item > a.hfe-menu-item, .hfe-masthead-custom-menu-items.woocommerce-custom-menu-item a, .hfe-creative-menu.menu-item-type-custom > a { font-family: var(--koz-font-head); font-weight: 600; color: #000 !important; letter-spacing: .01em; background: none !important; padding: 0; border-radius: 0; display: inline; transition: var(--koz-transition); } .hfe-nav-menu .menu-item > a.hfe-menu-item:hover, .hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item, .hfe-masthead-custom-menu-items.woocommerce-custom-menu-item a:hover, .hfe-creative-menu.menu-item-type-custom > a:hover { color: var(--koz-navy-700) !important; background: none !important; transform: none; } /* Koszyk w nagłówku */ .hfe-site-header-cart .hfe-cart-count, .hfe-cart-count { background: var(--koz-navy); color: #fff; font-weight: 700; border-radius: 999px; } .hfe-site-header-cart a:hover { color: var(--koz-navy-700); } /* ------------------------------------------------------------------ 4. SKLEP – NAGŁÓWEK ARCHIWUM + PASEK SORTOWANIA ------------------------------------------------------------------ */ .woocommerce-products-header { text-align: center; margin-bottom: 40px; } .woocommerce-products-header__title.page-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; position: relative; display: inline-block; padding-bottom: 18px; } .woocommerce-products-header__title.page-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 64px; height: 4px; border-radius: 4px; background: var(--koz-accent); } .woocommerce .woocommerce-result-count { color: var(--koz-muted); font-size: .92rem; margin-top: 6px; } .woocommerce .woocommerce-ordering select.orderby { font-family: var(--koz-font-body); border: 1px solid var(--koz-border); border-radius: var(--koz-radius-sm); padding: 10px 38px 10px 14px; background-color: #fff; color: var(--koz-text); cursor: pointer; transition: var(--koz-transition); } .woocommerce .woocommerce-ordering select.orderby:hover { border-color: var(--koz-navy); } /* ------------------------------------------------------------------ 5. SIATKA PRODUKTÓW / KARTY ------------------------------------------------------------------ */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 28px; margin: 0; } /* Usunięcie clearfixów Woo – w gridzie tworzą puste komórki */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; background: #fff; border: 1px solid var(--koz-border); border-radius: 0; padding: 16px 16px 22px; display: flex; flex-direction: column; box-shadow: var(--koz-shadow); transition: var(--koz-transition); } .woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--koz-shadow-lg); border-color: #d4dbe6; } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; } .woocommerce ul.products li.product img { border-radius: 0; margin-bottom: 16px; aspect-ratio: 1 / 1; object-fit: cover; background: var(--koz-bg-soft); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.08rem; font-weight: 700; color: var(--koz-navy); padding: 0 0 8px; min-height: 2.6em; } /* Cena */ .woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: var(--koz-navy); font-family: var(--koz-font-head); font-weight: 800; font-size: 1.2rem; } .woocommerce ul.products li.product .price { margin: 0 0 14px; } .woocommerce del { color: var(--koz-muted); font-weight: 500; opacity: .7; } .woocommerce ins { text-decoration: none; } /* Plakietka promocji */ .woocommerce span.onsale { background: var(--koz-accent); color: var(--koz-navy-900); font-family: var(--koz-font-head); font-weight: 700; border-radius: 999px; padding: 6px 14px; min-height: 0; min-width: 0; line-height: 1; top: 14px; left: 14px; box-shadow: var(--koz-shadow); } /* ------------------------------------------------------------------ 6. PRZYCISKI (globalnie) ------------------------------------------------------------------ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button { font-family: var(--koz-font-head); font-weight: 700; letter-spacing: .01em; background: var(--koz-navy); color: #fff; border: none; border-radius: 999px; padding: 13px 24px; transition: var(--koz-transition); box-shadow: 0 4px 14px rgba(15, 42, 74, 0.18); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .wc-block-components-button:hover { background: var(--koz-navy-700); color: #fff; transform: translateY(-2px); box-shadow: var(--koz-shadow-lg); } /* Przycisk „dodaj do koszyka” na karcie – pełna szerokość, akcent przy hover */ .woocommerce ul.products li.product .button.add_to_cart_button { margin-top: auto; width: 100%; text-align: center; } .woocommerce ul.products li.product .button.add_to_cart_button:hover { background: var(--koz-accent); color: var(--koz-navy-900); } .woocommerce ul.products li.product .added_to_cart { display: block; text-align: center; margin-top: 10px; font-weight: 600; color: var(--koz-accent-700); } /* Przycisk-duszek (np. „Wyświetl koszyk”) */ .woocommerce a.button.wc-forward, .woocommerce .button.added_to_cart { background: #fff; color: var(--koz-navy); border: 1.5px solid var(--koz-navy); box-shadow: none; } .woocommerce a.button.wc-forward:hover { background: var(--koz-navy); color: #fff; } /* ------------------------------------------------------------------ 7. KOMUNIKATY / NOTYFIKACJE WOO ------------------------------------------------------------------ */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top: none; border-left: 4px solid var(--koz-navy); border-radius: var(--koz-radius-sm); background: var(--koz-bg-soft); box-shadow: var(--koz-shadow); } .woocommerce-message::before { color: var(--koz-navy); } .woocommerce-message { border-left-color: var(--koz-accent); } .woocommerce-message::before { color: var(--koz-accent-700); } /* ------------------------------------------------------------------ 8. STRONA PRODUKTU ------------------------------------------------------------------ */ .woocommerce div.product .product_title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--koz-accent); } .woocommerce div.product .quantity .qty { border: 1px solid var(--koz-border); border-radius: var(--koz-radius-sm); padding: 10px; } .woocommerce div.product form.cart .button { padding: 14px 30px; } .woocommerce div.product .images img { border-radius: var(--koz-radius); } /* ------------------------------------------------------------------ 9. KOSZYK / ZAMÓWIENIE / KONTO ------------------------------------------------------------------ */ .woocommerce table.shop_table { border: 1px solid var(--koz-border); border-radius: var(--koz-radius); overflow: hidden; border-collapse: separate; } .woocommerce table.shop_table thead th { background: var(--koz-bg-soft); font-family: var(--koz-font-head); color: var(--koz-navy); } .woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review, .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { background: var(--koz-bg-soft); border: 1px solid var(--koz-border); border-radius: var(--koz-radius); padding: 22px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection { border: 1px solid var(--koz-border) !important; border-radius: var(--koz-radius-sm) !important; padding: 12px 14px; font-family: var(--koz-font-body); } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--koz-navy) !important; outline: none; box-shadow: 0 0 0 3px rgba(15, 42, 74, 0.08); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--koz-accent-700); font-weight: 700; } /* ------------------------------------------------------------------ 10. STOPKA (Header Footer Elementor) ------------------------------------------------------------------ */ /* ===== PREMIUM STOPKA (ciemna, granatowa) ===== */ #colophon { position: relative; background: var(--koz-navy-900); color: rgba(255, 255, 255, 0.80); font-family: var(--koz-font-body); } /* Akcentowa linia u góry */ #colophon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--koz-accent), var(--koz-accent-700)); } /* Kontenery przezroczyste – tło niesie