/** * WooCommerce styles for FansPaysite theme. * * Applies the theme's CSS variables (--text-color, --background-color, * --link-color) to WooCommerce elements so they follow the active * light/dark mode automatically. * * Theme mode is driven by [data-theme="light"|"dark"] on , set by * mode.php / theme.js — no extra JS required here. * * Sections: * 1. Base & Typography * 2. Product Grid / Archive * 3. Single Product * 4. Cart * 5. Checkout * 6. My Account * 7. Buttons * 8. Forms & Inputs * 9. Notices / Messages * 10. Widgets * 11. Pagination * 12. Breadcrumbs * 13. Light-mode overrides * 14. Dark-mode overrides * * @package FansPaysite * @since 2.3 */ /* ============================================================ 1. BASE & TYPOGRAPHY ============================================================ */ .woocommerce, .woocommerce-page { color: var(--text-color); } .woocommerce a { color: var(--link-color); } .woocommerce a:hover { opacity: 0.85; } /* ============================================================ 2. PRODUCT GRID / ARCHIVE ============================================================ */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .woocommerce ul.products li.product { background: var(--background-color); border: 1px solid transparent; border-radius: 6px; padding: 14px; transition: border-color 0.2s, box-shadow 0.2s; text-align: center; float: none; width: auto !important; margin: 0 !important; } .woocommerce ul.products li.product a img { border-radius: 4px; margin-bottom: 8px; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { color: var(--text-color); font-size: 1em; font-weight: 600; padding: 0; margin: 0 0 4px; } .woocommerce ul.products li.product .price { color: var(--text-color); font-weight: 600; margin-bottom: 8px; display: block; } .woocommerce ul.products li.product .price del { opacity: 0.5; } .woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 700; } .woocommerce ul.products li.product .star-rating { margin: 4px auto 8px; } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { color: var(--text-color); margin-bottom: 16px; } .woocommerce .woocommerce-ordering select { background: var(--background-color); color: var(--text-color); border: 1px solid transparent; border-radius: 4px; padding: 6px 10px; } /* ============================================================ 3. SINGLE PRODUCT ============================================================ */ .woocommerce div.product { color: var(--text-color); } .woocommerce div.product .product_title { color: var(--text-color); } .woocommerce div.product .price { color: var(--text-color); font-size: 1.4em; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-color); margin-bottom: 16px; } .woocommerce div.product .woocommerce-product-gallery { margin-bottom: 24px; } .woocommerce div.product .woocommerce-product-gallery img { border-radius: 6px; } .woocommerce div.product .woocommerce-tabs { margin-top: 24px; } .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 2px; border-bottom: 2px solid var(--link-color); } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: none; border-radius: 4px 4px 0 0; margin: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--text-color); padding: 8px 14px; display: block; text-decoration: none; font-size: 0.9em; transition: background 0.2s, color 0.2s; } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--link-color); background: rgba(119, 20, 93, 0.08); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--link-color); background: rgba(119, 20, 93, 0.12); font-weight: 600; } .woocommerce div.product .woocommerce-tabs .panel { color: var(--text-color); } /* Related / Upsell products */ .woocommerce div.product .related h2, .woocommerce div.product .upsells h2 { color: var(--text-color); } /* Star ratings */ .woocommerce .star-rating { color: var(--link-color); } .woocommerce .star-rating::before { color: var(--text-color); opacity: 0.2; } /* SKU / category / tag meta */ .woocommerce div.product .product_meta { color: var(--text-color); opacity: 0.7; font-size: 0.9em; margin-top: 16px; } .woocommerce div.product .product_meta a { color: var(--link-color); } /* ============================================================ 4. CART ============================================================ */ .woocommerce table.shop_table { border-collapse: collapse; width: 100%; background: var(--background-color); color: var(--text-color); border-radius: 6px; overflow: hidden; } .woocommerce table.shop_table th { color: var(--text-color); font-weight: 600; padding: 10px 12px; text-align: left; } .woocommerce table.shop_table td { color: var(--text-color); padding: 10px 12px; vertical-align: middle; } .woocommerce table.shop_table tr { border-bottom: 1px solid transparent; } .woocommerce table.shop_table img { border-radius: 4px; max-width: 60px; height: auto; } .woocommerce table.shop_table .product-name a { color: var(--text-color); font-weight: 600; text-decoration: none; } .woocommerce table.shop_table .product-name a:hover { color: var(--link-color); } .woocommerce table.shop_table .product-remove a { color: var(--text-color); opacity: 0.5; font-size: 1.4em; text-decoration: none; } .woocommerce table.shop_table .product-remove a:hover { color: #c82828; opacity: 1; } .woocommerce .cart-collaterals .cart_totals { color: var(--text-color); } .woocommerce .cart-collaterals .cart_totals h2 { color: var(--text-color); } /* Quantity input */ .woocommerce .quantity .qty { background: var(--background-color); color: var(--text-color); border: 1px solid transparent; border-radius: 4px; padding: 6px 8px; width: 60px; text-align: center; } /* Coupon */ .woocommerce .coupon .input-text { background: var(--background-color); color: var(--text-color); border: 1px solid transparent; border-radius: 4px; padding: 8px 10px; } /* ============================================================ 5. CHECKOUT ============================================================ */ .woocommerce-checkout .woocommerce-checkout-review-order-table { color: var(--text-color); } .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { background: var(--background-color); border: 1px solid transparent; border-radius: 6px; padding: 20px; } .woocommerce #payment { background: var(--background-color); border-radius: 6px; } .woocommerce #payment .payment_methods { list-style: none; margin: 0; padding: 16px; border-bottom: 1px solid transparent; } .woocommerce #payment .payment_methods li { color: var(--text-color); padding: 8px 0; } .woocommerce #payment .payment_methods li label { color: var(--text-color); font-weight: 600; } .woocommerce #payment .payment_box { color: var(--text-color); padding: 10px 16px; } .woocommerce #payment .place-order { padding: 16px; } /* ============================================================ 6. MY ACCOUNT ============================================================ */ .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 16px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--link-color); } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--text-color); background: transparent; border-radius: 4px 4px 0 0; padding: 8px 14px; display: block; text-decoration: none; font-size: 0.9em; transition: background 0.2s, color 0.2s; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--link-color); background: rgba(119, 20, 93, 0.08); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--link-color); background: rgba(119, 20, 93, 0.12); font-weight: 600; } .woocommerce-account .woocommerce-MyAccount-content { color: var(--text-color); } .woocommerce-account .woocommerce-MyAccount-content a { color: var(--link-color); } /* ============================================================ 7. BUTTONS ============================================================ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { background: var(--link-color) !important; color: #fff !important; border: none; border-radius: 4px; padding: 8px 18px; cursor: pointer; transition: opacity 0.2s; font-size: var(--font-size-sm, 14px); text-decoration: none; display: inline-block; line-height: 1.4; font-weight: 600; } .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, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover { opacity: 0.85; background: var(--link-color) !important; color: #fff !important; } .woocommerce a.button:disabled, .woocommerce button.button:disabled, .woocommerce input.button:disabled { opacity: 0.45; cursor: not-allowed; } /* ============================================================ 8. FORMS & INPUTS ============================================================ */ .woocommerce form .form-row label { color: var(--text-color); font-weight: 600; margin-bottom: 4px; display: block; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { background: var(--background-color); color: var(--text-color); border: 1px solid transparent; border-radius: 4px; padding: 8px 10px; width: 100%; font-family: var(--font-family-base); font-size: var(--font-size-base, 16px); transition: border-color 0.2s, box-shadow 0.2s; } .woocommerce form .form-row .required { color: #c82828; } /* ============================================================ 9. NOTICES / MESSAGES ============================================================ */ .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message, .wc-block-components-notice-banner { color: var(--text-color); border-radius: 4px; padding: 10px 14px; margin-bottom: 16px; list-style: none; } .woocommerce .woocommerce-error { background: rgba(200, 40, 40, 0.1); border-left: 4px solid #c82828; } .woocommerce .woocommerce-info { background: rgba(119, 20, 93, 0.08); border-left: 4px solid var(--link-color); } .woocommerce .woocommerce-message { background: rgba(40, 167, 69, 0.1); border-left: 4px solid #28a745; } .woocommerce .woocommerce-error a, .woocommerce .woocommerce-info a, .woocommerce .woocommerce-message a { color: var(--link-color); } /* ============================================================ 10. WIDGETS ============================================================ */ .woocommerce .widget_price_filter .price_slider_wrapper { color: var(--text-color); } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--link-color); border: none; } .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--link-color); opacity: 0.4; } .woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li { color: var(--text-color); padding: 8px 0; border-bottom: 1px solid transparent; } .woocommerce ul.cart_list li a, .woocommerce ul.product_list_widget li a { color: var(--text-color); font-weight: 600; text-decoration: none; } .woocommerce ul.cart_list li a:hover, .woocommerce ul.product_list_widget li a:hover { color: var(--link-color); } .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img { border-radius: 4px; } .woocommerce .widget_shopping_cart .total { color: var(--text-color); font-weight: 600; border-top: 1px solid transparent; padding-top: 8px; } /* ============================================================ 11. PAGINATION ============================================================ */ .woocommerce nav.woocommerce-pagination ul { display: flex; gap: 4px; flex-wrap: wrap; list-style: none; margin: 16px 0; padding: 0; border: none; } .woocommerce nav.woocommerce-pagination ul li { border: none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { color: var(--text-color); border: 1px solid transparent; border-radius: 4px; padding: 4px 10px; text-decoration: none; font-size: 0.9em; display: inline-block; transition: border-color 0.2s, color 0.2s; background: transparent; } .woocommerce nav.woocommerce-pagination ul li a:hover { color: var(--link-color); } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--link-color); color: #fff; border-color: var(--link-color); } /* ============================================================ 12. BREADCRUMBS ============================================================ */ .woocommerce .woocommerce-breadcrumb { color: var(--text-color); opacity: 0.65; font-size: 0.85em; margin-bottom: 16px; } .woocommerce .woocommerce-breadcrumb a { color: var(--link-color); text-decoration: none; } .woocommerce .woocommerce-breadcrumb a:hover { opacity: 0.85; } /* ============================================================ 13. LIGHT MODE — border and shadow overrides ============================================================ */ html[data-theme="light"] .woocommerce ul.products li.product { border-color: #e0e0e0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } html[data-theme="light"] .woocommerce ul.products li.product:hover { border-color: var(--link-color); box-shadow: 0 2px 8px rgba(119, 20, 93, 0.1); } html[data-theme="light"] .woocommerce table.shop_table tr { border-bottom-color: #f0f0f0; } html[data-theme="light"] .woocommerce table.shop_table th { border-bottom: 2px solid #e0e0e0; } html[data-theme="light"] .woocommerce form .form-row input.input-text, html[data-theme="light"] .woocommerce form .form-row textarea, html[data-theme="light"] .woocommerce form .form-row select, html[data-theme="light"] .woocommerce .quantity .qty, html[data-theme="light"] .woocommerce .coupon .input-text, html[data-theme="light"] .woocommerce .woocommerce-ordering select { border-color: #cccccc; } html[data-theme="light"] .woocommerce form .form-row input:focus, html[data-theme="light"] .woocommerce form .form-row textarea:focus, html[data-theme="light"] .woocommerce form .form-row select:focus { border-color: var(--link-color); outline: none; box-shadow: 0 0 0 2px rgba(119, 20, 93, 0.15); } html[data-theme="light"] .woocommerce form.checkout_coupon, html[data-theme="light"] .woocommerce form.login, html[data-theme="light"] .woocommerce form.register { border-color: #e0e0e0; } html[data-theme="light"] .woocommerce #payment { border: 1px solid #e0e0e0; } html[data-theme="light"] .woocommerce #payment .payment_methods { border-bottom-color: #f0f0f0; } html[data-theme="light"] .woocommerce nav.woocommerce-pagination ul li a, html[data-theme="light"] .woocommerce nav.woocommerce-pagination ul li span { border-color: #ddd; } html[data-theme="light"] .woocommerce ul.cart_list li, html[data-theme="light"] .woocommerce ul.product_list_widget li { border-bottom-color: #f0f0f0; } html[data-theme="light"] .woocommerce .widget_shopping_cart .total { border-top-color: #e0e0e0; } /* ============================================================ 14. DARK MODE — overrides ============================================================ */ html[data-theme="dark"] .woocommerce ul.products li.product { border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .woocommerce ul.products li.product:hover { border-color: var(--link-color); background-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .woocommerce table.shop_table { background-color: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .woocommerce table.shop_table tr { border-bottom-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .woocommerce table.shop_table th { border-bottom-color: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] .woocommerce form .form-row input.input-text, html[data-theme="dark"] .woocommerce form .form-row textarea, html[data-theme="dark"] .woocommerce form .form-row select, html[data-theme="dark"] .woocommerce .quantity .qty, html[data-theme="dark"] .woocommerce .coupon .input-text, html[data-theme="dark"] .woocommerce .woocommerce-ordering select { border-color: rgba(255, 255, 255, 0.18); background-color: rgba(255, 255, 255, 0.06); color: var(--text-color); } html[data-theme="dark"] .woocommerce form .form-row input:focus, html[data-theme="dark"] .woocommerce form .form-row textarea:focus, html[data-theme="dark"] .woocommerce form .form-row select:focus { border-color: var(--link-color); outline: none; box-shadow: 0 0 0 2px rgba(211, 158, 216, 0.25); } html[data-theme="dark"] .woocommerce form.checkout_coupon, html[data-theme="dark"] .woocommerce form.login, html[data-theme="dark"] .woocommerce form.register { border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .woocommerce #payment { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .woocommerce #payment .payment_methods { border-bottom-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li a, html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li span { border-color: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] .woocommerce ul.cart_list li, html[data-theme="dark"] .woocommerce ul.product_list_widget li { border-bottom-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .woocommerce .widget_shopping_cart .total { border-top-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .woocommerce .woocommerce-info { background: rgba(211, 158, 216, 0.1); } html[data-theme="dark"] .woocommerce .woocommerce-message { background: rgba(40, 167, 69, 0.15); } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul { border-bottom-color: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(211, 158, 216, 0.12); } html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: rgba(211, 158, 216, 0.18); } html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom-color: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { background: rgba(211, 158, 216, 0.12); } html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: rgba(211, 158, 216, 0.18); }