/* Theme Name: THMSupply Theme URI: https://thmsupply.com Author: THMSupply Author URI: https://thmsupply.com Description: Clean, minimal WooCommerce theme inspired by plainsupply.com. Light mode default with dark mode toggle. Built with Bootstrap 5 and full Gutenberg/WooCommerce support. Version: 1.5.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: thmsupply Tags: woocommerce, e-commerce, light, minimal, bootstrap, gutenberg WC requires at least: 7.0 WC tested up to: 8.9 */ /* ============================================================ DESIGN TOKENS – LIGHT MODE (DEFAULT) ============================================================ */ :root { --color-bg: #ffffff; --color-bg-secondary: #f7f7f5; --color-bg-card: #ffffff; --color-bg-hover: #f5f5f3; --color-surface: #f0f0ee; --color-border: #e8e8e4; --color-border-light: #d8d8d4; --color-text: #111111; --color-text-muted: #666666; --color-text-subtle: #aaaaaa; --color-accent: #111111; --color-accent-dim: rgba(0,0,0,0.05); --color-sale: #c0392b; --color-success: #27ae60; --font-display: 'DM Sans', 'Helvetica Neue', sans-serif; --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05); --shadow-hover: 0 2px 8px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.08); --container-max: 1360px; --header-height: 60px; } /* ============================================================ DARK MODE – aktivowany przez [data-theme="dark"] na ============================================================ */ [data-theme="dark"] { --color-bg: #0a0a0a; --color-bg-secondary: #111111; --color-bg-card: #161616; --color-bg-hover: #1e1e1e; --color-surface: #222222; --color-border: #2a2a2a; --color-border-light: #333333; --color-text: #f0f0f0; --color-text-muted: #888888; --color-text-subtle: #555555; --color-accent: #ffffff; --color-accent-dim: rgba(255,255,255,0.08); --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3); --shadow-hover: 0 2px 8px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.4); } /* Dark mode via OS preference (gdy użytkownik nie ustawił ręcznie) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0a0a0a; --color-bg-secondary: #111111; --color-bg-card: #161616; --color-bg-hover: #1e1e1e; --color-surface: #222222; --color-border: #2a2a2a; --color-border-light: #333333; --color-text: #f0f0f0; --color-text-muted: #888888; --color-text-subtle: #555555; --color-accent: #ffffff; --color-accent-dim: rgba(255,255,255,0.08); --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3); --shadow-hover: 0 2px 8px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.4); } } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-base), color var(--transition-base); } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; min-height: 100vh; transition: background-color var(--transition-base), color var(--transition-base); } a { color: inherit; text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); } img, video { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text); } h1 { font-size: clamp(1.75rem, 4vw, 3rem); } h2 { font-size: clamp(1.25rem, 2.5vw, 2rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.0625rem; } p { color: var(--color-text-muted); line-height: 1.7; } /* ============================================================ LAYOUT ============================================================ */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .container { padding: 0 40px; } } @media (min-width: 1200px) { .container { padding: 0 60px; } } .section-pad { padding: 72px 0; } @media (min-width: 768px) { .section-pad { padding: 100px 0; } } /* ============================================================ HEADER ============================================================ */ #masthead { position: sticky; top: 0; z-index: 1000; background: var(--color-bg); border-bottom: 1px solid var(--color-border); height: var(--header-height); display: flex; align-items: center; transition: background-color var(--transition-base), border-color var(--transition-base); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } /* Logo */ .site-branding .site-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text); } .site-branding .site-title a:hover { opacity: 0.6; } .custom-logo { height: 26px; width: auto; } /* Nav */ .main-navigation { flex: 1; display: flex; justify-content: center; } .main-navigation ul { display: flex; align-items: center; gap: 2px; } .main-navigation a { display: block; padding: 5px 11px; font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--color-text); background: var(--color-accent-dim); } /* Header Actions */ .header-actions { display: flex; align-items: center; gap: 4px; } .header-icon-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--color-text-muted); transition: color var(--transition-fast), background var(--transition-fast); position: relative; cursor: pointer; background: none; border: none; } .header-icon-btn:hover { color: var(--color-text); background: var(--color-accent-dim); } /* Dark Mode Toggle */ .theme-toggle { font-size: 0; } .theme-toggle svg { transition: transform var(--transition-base); } .theme-toggle:hover svg { transform: rotate(20deg); } /* Sun icon – shown in dark mode */ .icon-sun { display: none; } .icon-moon { display: block; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-sun { display: block; } :root:not([data-theme="light"]) .icon-moon { display: none; } } /* Cart Badge */ .cart-count-badge { position: absolute; top: 1px; right: 1px; background: var(--color-text); color: var(--color-bg); font-size: 0.5625rem; font-weight: 700; width: 13px; height: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Mobile Toggle */ .menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px; border-radius: var(--radius-sm); background: none; border: none; cursor: pointer; } .menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--color-text); transition: transform var(--transition-base), opacity var(--transition-base); } .menu-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 767px) { .menu-toggle { display: flex; } .main-navigation { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 12px 24px; } .main-navigation.open { display: block; } .main-navigation ul { flex-direction: column; align-items: flex-start; gap: 2px; } .main-navigation a { display: block; width: 100%; padding: 9px 12px; font-size: 0.9375rem; } } /* ============================================================ HERO ============================================================ */ .hero-section { padding: 80px 0 64px; border-bottom: 1px solid var(--color-border); } .hero-section h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; max-width: 760px; } .hero-section p { font-size: 1.0625rem; max-width: 520px; margin-bottom: 32px; line-height: 1.7; } .hero-cta-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ============================================================ BUTTONS ============================================================ */ .btn, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.005em; border-radius: var(--radius-sm); transition: all var(--transition-fast); cursor: pointer; white-space: nowrap; text-decoration: none; border: 1px solid transparent; } .btn-primary, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } .btn-primary:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { opacity: 0.8; color: var(--color-bg); } .btn-secondary, .woocommerce button.button, .woocommerce a.button { background: transparent; color: var(--color-text); border-color: var(--color-border-light); } .btn-secondary:hover, .woocommerce button.button:hover, .woocommerce a.button:hover { background: var(--color-accent-dim); border-color: var(--color-text-muted); } .btn-lg { padding: 12px 26px; font-size: 0.9375rem; } /* ============================================================ SECTION HEADERS ============================================================ */ .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); } .section-header h2 { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; } .section-header .view-all { font-size: 0.8125rem; color: var(--color-text-muted); transition: color var(--transition-fast); } .section-header .view-all:hover { color: var(--color-text); } /* ============================================================ PRODUCT CARDS ============================================================ */ .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); } @media (min-width: 640px) { .products-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .products-grid { grid-template-columns: repeat(4, 1fr); } } .product-card { position: relative; background: var(--color-bg); display: flex; flex-direction: column; transition: background var(--transition-fast); } .product-card:hover { background: var(--color-bg-hover); } .product-card-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-bg-secondary); } .product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .product-card:hover .product-card-image img { transform: scale(1.03); } .product-card-badge { position: absolute; top: 10px; left: 10px; padding: 2px 7px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-sm); z-index: 1; } .badge-sale { background: var(--color-sale); color: #fff; } .badge-new { background: var(--color-text); color: var(--color-bg); } .product-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 4px; } .product-card-title { font-size: 0.875rem; font-weight: 400; color: var(--color-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card-price { display: flex; align-items: center; gap: 7px; margin-top: 4px; } .product-card-price .price { font-size: 0.9375rem; font-weight: 500; color: var(--color-text); } .product-card-price .price del { font-size: 0.8125rem; color: var(--color-text-subtle); font-weight: 400; } .product-card-price .price ins { text-decoration: none; color: var(--color-text); } /* ============================================================ WOOCOMMERCE – PRODUCT LOOP ============================================================ */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } } .woocommerce ul.products li.product { background: var(--color-bg); display: flex; flex-direction: column; margin: 0; padding: 0; float: none; width: auto; transition: background var(--transition-fast); } .woocommerce ul.products li.product:hover { background: var(--color-bg-hover); } .woocommerce ul.products li.product .woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } .woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform var(--transition-slow); } .woocommerce ul.products li.product:hover img { transform: scale(1.03); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--color-text); padding: 13px 16px 3px; line-height: 1.4; } .woocommerce ul.products li.product .price { display: block; padding: 0 16px 13px; font-size: 0.9375rem; font-weight: 500; color: var(--color-text); } .woocommerce ul.products li.product .price del { color: var(--color-text-subtle); font-size: 0.8125rem; font-weight: 400; margin-right: 4px; } .woocommerce ul.products li.product .price ins { text-decoration: none; } .woocommerce ul.products li.product .button { margin: 0 16px 16px; width: calc(100% - 32px); text-align: center; display: block; } .woocommerce span.onsale { background: var(--color-sale); color: #fff; border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; min-height: auto; min-width: auto; top: 10px; left: 10px; right: auto; line-height: 1.5; } /* ============================================================ WOOCOMMERCE – SINGLE PRODUCT ============================================================ */ .woocommerce div.product { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 48px 0; } @media (min-width: 768px) { .woocommerce div.product { grid-template-columns: 1fr 1fr; align-items: start; } } .woocommerce div.product .woocommerce-product-gallery { position: sticky; top: calc(var(--header-height) + 24px); } .woocommerce div.product .woocommerce-product-gallery__image { border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-secondary); border: 1px solid var(--color-border); } .woocommerce div.product .product_title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400; margin-bottom: 12px; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.375rem; font-weight: 500; color: var(--color-text); margin-bottom: 24px; display: block; } .woocommerce div.product p.price del, .woocommerce div.product span.price del { font-size: 1rem; color: var(--color-text-subtle); font-weight: 400; margin-right: 8px; } .woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--color-text-muted); margin-bottom: 24px; font-size: 0.9375rem; line-height: 1.7; } .woocommerce div.product form.cart .single_add_to_cart_button { background: var(--color-text); color: var(--color-bg); border: none; padding: 13px 32px; font-size: 0.9375rem; font-weight: 500; border-radius: var(--radius-sm); width: 100%; transition: opacity var(--transition-fast); cursor: pointer; } .woocommerce div.product form.cart .single_add_to_cart_button:hover { opacity: 0.75; } .woocommerce div.product form.cart { display: flex; flex-direction: column; gap: 10px; } .woocommerce div.product form.cart .qty { background: var(--color-bg-secondary); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.9375rem; width: 100%; outline: none; transition: border-color var(--transition-fast); } .woocommerce div.product form.cart .qty:focus { border-color: var(--color-text-muted); } /* Tabs */ .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 0; border-bottom: 1px solid var(--color-border); margin-bottom: 32px; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { border: none; border-bottom: 2px solid transparent; background: none; margin-bottom: -1px; border-radius: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 0.875rem; color: var(--color-text-muted); padding: 10px 16px; display: block; text-decoration: none; transition: color var(--transition-fast); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--color-text); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-text); } /* ============================================================ WOOCOMMERCE – CART & CHECKOUT ============================================================ */ .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { padding: 48px 0; } .woocommerce table.shop_table { width: 100%; border-collapse: collapse; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .woocommerce table.shop_table thead th { background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 20px; text-align: left; } .woocommerce table.shop_table tbody td { padding: 18px 20px; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: 0.9375rem; vertical-align: middle; } .woocommerce table.shop_table tbody tr:last-child td { border-bottom: none; } .woocommerce table.shop_table .product-thumbnail img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg-secondary); border: 1px solid var(--color-border); } .woocommerce td.product-name a { color: var(--color-text); font-weight: 400; } .woocommerce td.product-name a:hover { opacity: 0.6; } .woocommerce a.remove { color: var(--color-text-subtle) !important; font-size: 1.25rem; } .woocommerce a.remove:hover { color: var(--color-sale) !important; background: transparent; } .woocommerce .cart_totals { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; max-width: 400px; margin-left: auto; } .woocommerce .cart_totals h2 { font-size: 0.9375rem; font-weight: 500; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); } .woocommerce .cart_totals table { width: 100%; border-collapse: collapse; } .woocommerce .cart_totals table th, .woocommerce .cart_totals table td { padding: 10px 0; font-size: 0.9375rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); } .woocommerce .cart_totals table th { color: var(--color-text-muted); font-weight: 400; width: 40%; } .woocommerce .cart_totals table tr:last-child th, .woocommerce .cart_totals table tr:last-child td { border-bottom: none; font-weight: 500; } .woocommerce .wc-proceed-to-checkout .checkout-button { display: block; width: 100%; margin-top: 16px; padding: 13px; font-size: 0.9375rem; text-align: center; } /* Checkout form inputs */ .woocommerce form .form-row label { font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); display: block; margin-bottom: 5px; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 0.9375rem; width: 100%; outline: none; transition: border-color var(--transition-fast); -webkit-appearance: none; } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus { border-color: var(--color-text-muted); } /* ============================================================ NOTICES ============================================================ */ .woocommerce-message { background: rgba(39,174,96,0.08); border: 1px solid rgba(39,174,96,0.25); color: #27ae60; border-radius: var(--radius-sm); padding: 12px 18px; font-size: 0.875rem; margin-bottom: 16px; } .woocommerce-info { background: var(--color-bg-secondary); border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: var(--radius-sm); padding: 12px 18px; font-size: 0.875rem; margin-bottom: 16px; } .woocommerce-error { background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25); color: var(--color-sale); border-radius: var(--radius-sm); padding: 12px 18px; font-size: 0.875rem; margin-bottom: 16px; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } /* ============================================================ BLOG CARDS ============================================================ */ .posts-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); } @media (min-width: 640px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } } .post-card { background: var(--color-bg); display: flex; flex-direction: column; transition: background var(--transition-fast); } .post-card:hover { background: var(--color-bg-hover); } .post-card-image { aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-secondary); } .post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .post-card:hover .post-card-image img { transform: scale(1.03); } .post-card-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .post-card-title { font-size: 0.9375rem; font-weight: 500; color: var(--color-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card-excerpt { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ NEWSLETTER SECTION ============================================================ */ .newsletter-section { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 56px 0; text-align: center; } .newsletter-section p.newsletter-eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 10px; } .newsletter-section h2 { font-size: 1.5rem; margin-bottom: 8px; } .newsletter-section p { margin-bottom: 24px; font-size: 0.9375rem; } .newsletter-form { display: flex; max-width: 400px; margin: 0 auto; gap: 8px; flex-wrap: wrap; } .newsletter-form input[type="email"] { flex: 1; min-width: 180px; background: var(--color-bg); border: 1px solid var(--color-border-light); color: var(--color-text); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 0.9375rem; outline: none; transition: border-color var(--transition-fast); } .newsletter-form input[type="email"]:focus { border-color: var(--color-text-muted); } .newsletter-form input[type="email"]::placeholder { color: var(--color-text-subtle); } .newsletter-form button { background: var(--color-text); color: var(--color-bg); padding: 9px 18px; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-sm); transition: opacity var(--transition-fast); white-space: nowrap; } .newsletter-form button:hover { opacity: 0.75; } /* ============================================================ TRUST BAR ============================================================ */ .trust-bar { border-top: 1px solid var(--color-border); padding: 18px 0; text-align: center; } .trust-bar p { font-size: 0.8125rem; color: var(--color-text-subtle); display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; } /* ============================================================ FOOTER ============================================================ */ #colophon { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: 56px 0 28px; transition: background-color var(--transition-base); } .footer-top { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; } @media (min-width: 640px) { .footer-top { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-brand .site-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 8px; } .footer-brand p { font-size: 0.875rem; color: var(--color-text-muted); max-width: 260px; line-height: 1.6; } .footer-col h4 { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 14px; } .footer-col ul { display: flex; flex-direction: column; gap: 7px; } .footer-col ul li a { font-size: 0.875rem; color: var(--color-text-muted); transition: color var(--transition-fast); } .footer-col ul li a:hover { color: var(--color-text); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--color-border); flex-wrap: wrap; gap: 10px; } .footer-bottom p { font-size: 0.8125rem; color: var(--color-text-subtle); margin: 0; } .footer-bottom a { color: var(--color-text-muted); } .footer-bottom a:hover { color: var(--color-text); } /* ============================================================ SEARCH FORM ============================================================ */ .search-form { display: flex; gap: 8px; } .search-form .search-field { flex: 1; background: var(--color-bg-secondary); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 0.9375rem; outline: none; transition: border-color var(--transition-fast); } .search-form .search-field:focus { border-color: var(--color-text-muted); } .search-form .search-field::placeholder { color: var(--color-text-subtle); } .search-form .search-submit { background: var(--color-text); color: var(--color-bg); padding: 9px 18px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: opacity var(--transition-fast); } .search-form .search-submit:hover { opacity: 0.75; } /* ============================================================ PAGINATION ============================================================ */ .woocommerce-pagination ul, .navigation .nav-links { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; padding: 40px 0 0; } .woocommerce-pagination ul li a, .woocommerce-pagination ul li span, .navigation .nav-links a, .navigation .nav-links span { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 9px; font-size: 0.875rem; border-radius: var(--radius-sm); color: var(--color-text-muted); border: 1px solid var(--color-border); transition: all var(--transition-fast); } .woocommerce-pagination ul li a:hover, .navigation .nav-links a:hover { color: var(--color-text); border-color: var(--color-border-light); background: var(--color-accent-dim); } .woocommerce-pagination ul li span.current, .navigation .nav-links span.current { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } /* ============================================================ WIDGETS ============================================================ */ .widget { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 16px; } .widget-title { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); } .widget ul { display: flex; flex-direction: column; gap: 5px; } .widget ul li a { font-size: 0.875rem; color: var(--color-text-muted); transition: color var(--transition-fast); } .widget ul li a:hover { color: var(--color-text); } /* ============================================================ BREADCRUMB ============================================================ */ .woo-breadcrumb { padding: 20px 0 4px; } .woo-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0; margin: 0; } .woo-breadcrumb li { font-size: 0.8125rem; color: var(--color-text-subtle); } .woo-breadcrumb li a { color: var(--color-text-muted); text-decoration: none; } .woo-breadcrumb li a:hover { color: var(--color-text); } .breadcrumb-sep { margin: 0 2px; color: var(--color-text-subtle); } /* ============================================================ ACCOUNT PAGES ============================================================ */ .woocommerce-account .woocommerce { display: grid; gap: 40px; padding: 48px 0; } @media (min-width: 768px) { .woocommerce-account .woocommerce { grid-template-columns: 200px 1fr; align-items: start; } } .woocommerce-account .woocommerce-MyAccount-navigation { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .woocommerce-account .woocommerce-MyAccount-navigation ul { padding: 6px; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 8px 11px; font-size: 0.875rem; color: var(--color-text-muted); border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover, .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--color-text); background: var(--color-accent-dim); } /* ============================================================ SINGLE POST ============================================================ */ .single-post .entry-header { padding: 48px 0 28px; border-bottom: 1px solid var(--color-border); margin-bottom: 36px; } .single-post .entry-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 400; margin-bottom: 14px; } .entry-meta { font-size: 0.8125rem; color: var(--color-text-subtle); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .entry-meta a { color: var(--color-text-muted); } .entry-meta a:hover { color: var(--color-text); } .entry-content { max-width: 680px; margin: 0 auto; font-size: 1rem; line-height: 1.8; } .entry-content p { color: var(--color-text-muted); margin-bottom: 18px; } .entry-content h2, .entry-content h3 { margin: 36px 0 14px; color: var(--color-text); } .entry-content ul, .entry-content ol { padding-left: 22px; margin-bottom: 18px; color: var(--color-text-muted); } .entry-content ul { list-style: disc; } .entry-content ol { list-style: decimal; } /* ============================================================ GUTENBERG BLOCKS ============================================================ */ .wp-block-separator { border-color: var(--color-border); opacity: 1; } .wp-block-quote { border-left: 2px solid var(--color-border-light); padding: 14px 22px; margin: 28px 0; color: var(--color-text-muted); font-style: italic; } .wp-block-code { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 18px 22px; font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-text); } .wp-block-image img { border-radius: var(--radius-md); } .wp-block-button__link { background: var(--color-text); color: var(--color-bg); border-radius: var(--radius-sm); padding: 9px 18px; font-size: 0.875rem; font-weight: 500; transition: opacity var(--transition-fast); } .wp-block-button__link:hover { opacity: 0.75; color: var(--color-bg); } /* ============================================================ UTILITIES ============================================================ */ @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .show-mobile-only { display: none !important; } } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } :focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; } ::selection { background: rgba(0,0,0,0.1); color: var(--color-text); } [data-theme="dark"] ::selection { background: rgba(255,255,255,0.15); } /* ============================================================ CART SIDEBAR ============================================================ */ .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1090; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .cart-overlay.open { opacity: 1; pointer-events: auto; } .cart-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; background: var(--color-bg); border-left: 1px solid var(--color-border); z-index: 1100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); overflow: hidden; } .cart-sidebar.open { transform: translateX(0); } .cart-sidebar__header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 60px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .cart-sidebar__title { font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .cart-sidebar__close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text-muted); transition: color var(--transition-fast), background var(--transition-fast); background: none; border: none; cursor: pointer; } .cart-sidebar__close:hover { color: var(--color-text); background: var(--color-accent-dim); } .cart-sidebar__body { flex: 1; overflow-y: auto; padding: 16px 20px; } .cart-sidebar__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 200px; text-align: center; color: var(--color-text-muted); font-size: 0.875rem; } .cart-sidebar__empty p { margin: 0; } /* Cart items */ .cart-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--color-border); } .cart-item:last-child { border-bottom: none; } .cart-item__img { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-secondary); border: 1px solid var(--color-border); } .cart-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-item__info { flex: 1; min-width: 0; } .cart-item__name { font-size: 0.875rem; color: var(--color-text); line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cart-item__name a { color: inherit; text-decoration: none; } .cart-item__name a:hover { opacity: 0.7; } .cart-item__meta { display: flex; gap: 10px; font-size: 0.8125rem; color: var(--color-text-muted); } .cart-item__price { font-weight: 500; color: var(--color-text); } .cart-item__remove { flex-shrink: 0; color: var(--color-text-subtle); font-size: 1.25rem; line-height: 1; text-decoration: none; transition: color var(--transition-fast); padding: 2px; cursor: pointer; background: none; border: none; } .cart-item__remove:hover { color: var(--color-sale); } a.cart-item__remove { display: block; } /* Footer */ .cart-sidebar__footer { padding: 16px 20px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .cart-sidebar__subtotal { display: flex; justify-content: space-between; align-items: center; font-size: 0.9375rem; color: var(--color-text); margin-bottom: 4px; } .cart-sidebar__subtotal span:first-child { color: var(--color-text-muted); font-size: 0.875rem; } .cart-sidebar__subtotal span:last-child { font-weight: 500; } .cart-sidebar__btn-cart, .cart-sidebar__btn-checkout { width: 100%; justify-content: center; padding: 11px; } /* ============================================================ SINGLE PRODUCT PAGE ============================================================ */ .sp-page { padding-bottom: 0; } .sp-wrap { max-width: var(--container-max); margin: 0 auto; padding: 32px 24px 64px; display: grid; grid-template-columns: 1fr; gap: 32px; } @media(min-width:768px){ .sp-wrap { grid-template-columns:1fr 1fr; gap:60px; padding:40px 40px 80px; align-items:start; } } @media(min-width:1200px){ .sp-wrap { padding:48px 60px 80px; gap:80px; } } .sp-gallery { display:flex; flex-direction:column; gap:8px; } @media(min-width:768px){ .sp-gallery { position:sticky; top:calc(var(--header-height)+20px); } } .sp-main-img { position:relative; aspect-ratio:1/1; background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; } .sp-zoom { display:block; width:100%; height:100%; position:relative; } .sp-main-img__photo { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .sp-zoom:hover .sp-main-img__photo { transform:scale(1.02); } .sp-zoom-icon { position:absolute; top:10px; right:10px; width:28px; height:28px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); opacity:0; transition:opacity .2s; } .sp-zoom:hover .sp-zoom-icon { opacity:1; } .sp-main-img__placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; } .sp-thumbs { display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; } .sp-thumb { width:68px; height:68px; padding:0; flex-shrink:0; border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; background:var(--color-bg-secondary); opacity:.6; transition:opacity .2s,border-color .2s; } .sp-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .sp-thumb:hover { opacity:.85; } .sp-thumb.is-active { border-color:var(--color-text); opacity:1; } .sp-info { display:flex; flex-direction:column; gap:0; } .sp-bc { margin-bottom:14px; } .sp-bc ol { list-style:none; display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:0; margin:0; } .sp-bc li { font-size:.8125rem; color:var(--color-text-subtle); } .sp-bc li a { color:var(--color-text-muted); text-decoration:none; } .sp-bc li a:hover { color:var(--color-text); } .sp-bc__sep { margin:0 2px; color:var(--color-text-subtle); } .sp-title { font-size:clamp(1.375rem,3vw,1.875rem); font-weight:400; letter-spacing:-.025em; color:var(--color-text); margin:0 0 10px; line-height:1.25; } .sp-price { margin-bottom:12px; } .sp-price .price, .sp-price .woocommerce-Price-amount { font-size:1.1875rem; font-weight:500; color:var(--color-text); } .sp-price del { color:var(--color-text-subtle); font-size:.9375rem; margin-right:5px; } .sp-price ins { text-decoration:none; } .sp-promo { display:flex; align-items:flex-start; gap:8px; background:var(--color-bg-secondary); border:1px solid var(--color-border); border-left:3px solid var(--color-text); border-radius:var(--radius-sm); padding:10px 13px; font-size:.875rem; color:var(--color-text-muted); margin-bottom:14px; line-height:1.5; } .sp-promo svg { color:var(--color-text); flex-shrink:0; margin-top:1px; } .sp-excerpt { font-size:.9375rem; color:var(--color-text-muted); line-height:1.7; margin-bottom:18px; } .sp-excerpt p { margin:0 0 8px; } .sp-cart-wrap { margin-bottom:10px; } .sp-cart-wrap form.cart { display:flex; flex-direction:column; gap:8px; } .sp-cart-wrap .quantity { width:100%; } .sp-cart-wrap .qty { width:100%; background:var(--color-bg-secondary); border:1px solid var(--color-border); color:var(--color-text); border-radius:var(--radius-sm); padding:10px 14px; font-size:.9375rem; font-family:var(--font-body); outline:none; transition:border-color .2s; } .sp-cart-wrap .qty:focus { border-color:var(--color-text-muted); } .sp-cart-wrap .single_add_to_cart_button { width:100% !important; background:var(--color-text) !important; color:var(--color-bg) !important; border:none !important; border-radius:var(--radius-sm) !important; padding:13px 24px !important; font-size:.9375rem !important; font-weight:500 !important; font-family:var(--font-body) !important; cursor:pointer; transition:opacity .15s !important; text-align:center; } .sp-cart-wrap .single_add_to_cart_button:hover { opacity:.75 !important; } .sp-demo-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; font-size:.875rem; font-weight:500; color:var(--color-text-muted); border:1px solid var(--color-border); border-radius:var(--radius-sm); text-decoration:none; transition:color .15s,border-color .15s,background .15s; margin-bottom:14px; } .sp-demo-btn:hover { color:var(--color-text); border-color:var(--color-text-muted); } .sp-meta { font-size:.8125rem; color:var(--color-text-subtle); margin-bottom:16px; } .sp-meta .posted_in, .sp-meta .tagged_as { display:block; } .sp-meta a { color:var(--color-text-muted); } .sp-meta a:hover { color:var(--color-text); } .sp-tabs { border-top:1px solid var(--color-border); margin-top:4px; } .sp-tabs__nav { display:flex; gap:0; border-bottom:1px solid var(--color-border); } .sp-tab-btn { padding:12px 16px; font-size:.875rem; font-weight:400; color:var(--color-text-muted); font-family:var(--font-body); background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; transition:color .15s,border-color .15s; white-space:nowrap; } .sp-tab-btn:hover { color:var(--color-text); } .sp-tab-btn.is-active { color:var(--color-text); border-bottom-color:var(--color-text); font-weight:500; } .sp-tab-panel { display:none; } .sp-tab-panel.is-active { display:block; } .sp-tab-content { padding:20px 0; font-size:.9375rem; color:var(--color-text-muted); line-height:1.7; } .sp-tab-content p { margin-bottom:12px; } .sp-tab-content p:last-child { margin-bottom:0; } .sp-tab-content h2,.sp-tab-content h3,.sp-tab-content h4 { color:var(--color-text); margin:20px 0 8px; font-weight:500; } .sp-tab-content ul,.sp-tab-content ol { padding-left:20px; margin-bottom:12px; } .sp-tab-content ul { list-style:disc; } .sp-tab-content ol { list-style:decimal; } .sp-tab-content li { margin-bottom:4px; } .sp-changelog strong,.sp-changelog b { color:var(--color-text); font-weight:600; } .sp-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.93); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; pointer-events:none; transition:opacity .2s; } .sp-lightbox.open { opacity:1; pointer-events:auto; } .sp-lightbox__img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:var(--radius-md); } .sp-lightbox__close { position:absolute; top:18px; right:18px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-sm); color:#fff; cursor:pointer; } .sp-lightbox__close:hover { background:rgba(255,255,255,.2); } .single-product .woocommerce-product-gallery, .woocommerce-product-gallery { display:none !important; } .single-product .woocommerce-tabs { display:none !important; } .single-product .related.products { display:none !important; } /* ── You may also like ── */ .sp-related { border-top:1px solid var(--color-border); } .sp-related__inner { max-width:var(--container-max); margin:0 auto; padding:0 24px; } @media(min-width:768px){ .sp-related__inner { padding:0 40px; } } @media(min-width:1200px){ .sp-related__inner { padding:0 60px; } } .sp-related__hdr { padding:16px 0; border-bottom:1px solid var(--color-border); } .sp-related__hdr span { font-size:.8125rem; font-weight:500; color:var(--color-text); } .sp-related__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--color-border); border-bottom:1px solid var(--color-border); } @media(min-width:640px){ .sp-related__grid { grid-template-columns:repeat(4,1fr); } } .sp-related__grid .fp-product-card { display:flex; flex-direction:column; background:var(--color-bg); text-decoration:none; color:inherit; transition:background .15s; } .sp-related__grid .fp-product-card:hover { background:var(--color-bg-hover,#f7f7f5); } .sp-related__grid .fp-product-card__media { position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--color-bg-secondary); } .sp-related__grid .fp-product-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .sp-related__grid .fp-product-card:hover .fp-product-card__media img { transform:scale(1.04); } .sp-related__grid .fp-product-card__body { padding:12px 14px 14px; border-top:1px solid var(--color-border); flex:1; } .sp-related__grid .fp-product-card__title { font-size:.875rem; font-weight:400; color:var(--color-text); margin:0 0 4px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .sp-related__grid .fp-product-card__price { font-size:.875rem; font-weight:500; color:var(--color-text); margin:0; } .sp-related__grid .fp-product-card__price .price, .sp-related__grid .fp-product-card__price .woocommerce-Price-amount { font-size:.875rem; } .sp-related__grid .fp-product-card__price del { color:var(--color-text-subtle); font-size:.8125rem; } .sp-related__grid .fp-product-card__price ins { text-decoration:none; } .fp-placeholder-img { width:100%; aspect-ratio:1/1; background:var(--color-bg-secondary); display:block; } /* ============================================================ CHECKOUT – POLA DODATKOWE (FV, Forum URL) ============================================================ */ #thmsupply-invoice-fields { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px 16px 4px; margin: 4px 0 16px; } #thmsupply-invoice-toggle label { font-weight: 500; cursor: pointer; } #thmsupply-invoice-fields .form-row { margin-bottom: 14px; } #thmsupply-forum-field .form-row label { font-weight: 500; } #thmsupply-forum-field .thmsupply-forum-note { font-size: .8125rem; color: var(--color-text-subtle); margin: -8px 0 16px; }