/* === New for Professional Refactor: Update State === */ /* * Provides visual feedback during the unified AJAX update process. * When the has this class, buttons are temporarily disabled. */ /* File: /assets/css/frontend.css (Definitive, Complete & Final Version) */ :root { --tp-orange: #f1641e; --tp-orange-dark: #d95413; --tp-green: #4caf50; --tp-blue: #0a78af; } /* Desktop Main Header */ #tp-desktop-header-wrapper .avatar-dropdown { position: relative; display: inline-block; } #tp-desktop-header-wrapper .avatar-dropdown .dropdown-content { display: flex; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; position: absolute; top: 100%; width: 220px; right: 0; background-color: white; min-width: 150px; max-width: 350px; margin-top: 2px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 999; border-radius: 6px; } #tp-desktop-header-wrapper .avatar-dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); } /* Desktop Categories */ #tp-desktop-header-wrapper .categories-h-menu { position: relative; } #tp-desktop-header-wrapper .categories-h-menu .categories-h-dropdown { display: flex; opacity: 0; visibility:hidden; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; position: absolute; top: 100%; left: 0; background-color: white; min-width: 200px; max-width: 300px; margin-top: 1px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 999; border-radius: 6px; } #tp-desktop-header-wrapper .sub-menu { min-width: 250px !important; } #tp-desktop-header-wrapper .categories-h-menu:hover { cursor: pointer; } #tp-desktop-header-wrapper .categories-h-menu:hover .categories-h-dropdown { opacity: 1; visibility: visible; cursor: pointer; transform: translateY(0); } /*** Mobile Top Header ***/ .tp-mobile-search-popup .dialog-close-button.dialog-lightbox-close-button, .tp-mobile-offcanvas-popup .dialog-close-button.dialog-lightbox-close-button { padding: 5px; border-radius: 100px; } .variations_form.cart { text-align: center; padding: 10px; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); } .woocommerce-variation-add-to-cart.variations_button { display: flex; justify-content: center; text-align: center; } .variations_form.cart .variations tr { padding: 5px; background-color: #fff; border-radius: 10px; } .variations_form.cart .variations tr td { background-color: #fff; } .variations_form_cart .single_add_to_cart_button { margin-top: 10px; } .variations_form_cart .price span, .variations_form_cart .price bdi { color: #d95413 !important; } /* --- Global Button Overrides --- */ .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: var(--tp-orange) !important; color: #fff !important; border-radius: 6px !important; font-weight: 600 !important; transition: background-color 0.2s !important; padding: 0.7em 1.5em !important; border: none !important; width: 100%; text-align: center; } .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background-color: var(--tp-orange-dark) !important; } .membership-actions.order-actions { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } td.membership-plan { text-align: center; } table.my_account_memberships { background-color: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(10, 120, 175, 0.1); padding: 2em; margin: 2em auto; } table.my_account_memberships td { text-align: center; background-color: #fff; } .tp-single-button { width: 100% !important; padding: 2.5em 1.5em !important; } /* --- Product Card & Icon Button Styles --- */ #tp-product-card { position: relative; } .tp-action-icon-btn, .tinv-wraper-loop { display: flex !important; align-items: center !important; justify-content: center !important; background-color: white !important; border-radius: 100px !important; width: 35px !important; height: 35px !important; padding: 0 !important; border: none !important; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1) !important; transition: opacity 0.3s ease, background-color 0.3s ease; } /* --- FIX for Wishlist & Action Button Hover --- */ #tp-product-card .tp-action-icon-btn, #tp-product-card .tp-product-card-wishlist { opacity: 0; visibility: hidden; pointer-events: none; } #tp-product-card:hover .tp-action-icon-btn, #tp-product-card:hover .tp-product-card-wishlist { opacity: 1; visibility: visible; pointer-events: auto; } /* --- FIX for "In Cart" Button State --- */ .tp-action-icon-btn.in-cart { background-color: var(--tp-orange) !important; } .tp-action-icon-btn.in-cart img { filter: brightness(0) invert(1); /* Makes the SVG white */ } .added_to_cart.wc-forward { display: none !important; } /* Other Icon Styles */ .tp-action-icon-btn img { width: 20px; height: 20px; transition: filter 0.3s ease; } /* Free Patterns Download Icon */ .tp-free-member-modal-btn { background-color: var(--tp-green) !important; color: #fff !important; } .tp-action-icon-btn .dashicons { font-size: 22px; color: #fff; } /* */ .tinv-wraper-loop i { font-size: 16px !important; } /* Title Truncation */ .elementor-widget-woocommerce-products .woocommerce-loop-product__title, #tp-product-card .tp-product-card-title { display: -webkit-box; -webkit-line-clamp: 1; /* Show only 1 line */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* Fallback for browsers that don't support line-clamp */ } .tp-single-button.tp-download-now-btn, .tp-single-button.tp-free-download-btn, .tp-action-icon-btn.tp-free-download-btn, .tp-action-icon-btn.tp-download-now-btn { background-color: var(--tp-green) !important; } /* --- Badge Styling --- */ .tp-badge { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 16px; font-weight: 600; } .tp-badge-perks, .tp-badge-quota, .tp-badge-free-members { background-color: #e6f7e6; color: var(--tp-green); } .tp-badge-owned { background-color: #e9e7fd; color: #5856d6; } .tp-badge-discount { background-color: #fff8e1; color: #ffab00; } /* --- Cart & My Account Styles --- */ .woocommerce-cart-form__cart-item .product-name a { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .woocommerce-MyAccount-navigation { display: none; } .woocommerce-account .woocommerce { display: block !important; } .woocommerce-MyAccount-content { width: 100% !important; background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(10, 120, 175, 0.1); padding: 2em; margin: 2em auto; } /* --- Price Styling --- */ .tp-price-free { color: #d95413 !important; /* Orange for Free label */ font-weight: 600 !important; text-decoration: none !important; /* Remove underline from "Free" */ } .tp-price-discounted span bdi { color: #0A79B1 !important; /* Blue for discounted price */ font-weight: 600 !important; } .tp-price-original, .tp-price-display-wrapper del { color: #d95413 !important; /* Orange for original price */ opacity: 0.6; margin-right: 0.5em; font-weight: 600 !important; text-decoration: line-through !important; } /* Regular price styling for all users */ .price, .woocommerce-Price-amount, .woocommerce-Price-amount bdi { color: var(--tp-orange) !important; /* Orange for regular prices */ font-weight: 600 !important; } .price ins { color: #0A79B1 !important; /* Blue for discounted price in WooCommerce default */ font-weight: 600 !important; text-decoration: none !important; } /* Ensure all price elements have proper font weight */ .tp-price-display-wrapper .price, .tp-price-display-wrapper .woocommerce-Price-amount, .tp-price-display-wrapper .woocommerce-Price-amount bdi { font-weight: 600 !important; } .tp-price-display-wrapper ins, .tp-price-display-wrapper del { text-decoration: none; } /* Base style for ALL info shortcodes */ .tp-info-shortcode { display: inline-block; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; margin-top: 5px; margin-bottom: 5px; } /* Color modifier for Membership Level */ .tp-info-shortcode.tp-membership-level { background-color: #eef5f9; /* Light blue */ color: var(--tp-blue); } /* Color modifier for non-members */ .tp-info-shortcode.tp-not-member, .tp-info-shortcode.tp-no-plan { background-color: #fdecec; /* Light red */ color: #c53030; } /* Color modifier for Downloads Remaining */ .tp-info-shortcode.tp-downloads-remaining { background-color: #e6f7e6; /* Light green */ color: var(--tp-green); } .tp-info-shortcode.tp-total-downloads { background-color: #f3e8ff; /* Light purple background */ color: #805ad5; } /* Color modifier for the Member Discount */ .tp-info-shortcode.tp-member-discount { background-color: #fff8e1; /* Same as sale timer for consistency */ color: #f57c00; } /* Color modifier for the Next Billing Date */ .tp-info-shortcode.tp-next-billing-date { background-color: #e2e8f0; /* Neutral gray */ color: #4a5568; } /* Color modifier for the Time Left display */ .tp-info-shortcode.tp-time-left { background-color: #e2e8f0; /* Same as next billing date for consistency */ color: #4a5568; } .elementor-loop-container { contain: layout paint; } /* --- Dashboard Stats Styling --- */ .tp-dashboard-stat-inactive { background-color: #ffebee !important; color: #c62828 !important; border: 1px solid transparent !important; padding: 6px 16px !important; border-radius: 16px !important; display: inline-block !important; font-weight: 500 !important; line-height: 1.5 !important; text-align: center !important; margin-top: 5px !important; } /* --- WP Grid Builder AJAX Loading Effect --- */ /* This targets the grid when WPGB adds its loading class */ .elementor-widget-loop-grid.wpgb-loading { position: relative !important; /* Needed for the overlay */ opacity: 0.6 !important; /* Dims the content */ transition: opacity 0.2s ease-in-out; } /* Creates the spinner icon */ .elementor-widget-loop-grid.wpgb-loading::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 40px !important; height: 40px !important; margin-top: -20px !important; /* Center vertically */ margin-left: -20px !important; /* Center horizontally */ border: 5px solid rgba(0, 0, 0, 0.1) !important; border-top-color: #0a78af !important; /* TidyPatterns Blue */ border-radius: 50% !important; animation: tp-wpgb-spinner 0.8s linear infinite !important; z-index: 10 !important; } /* The keyframe animation for the spinner */ @keyframes tp-wpgb-spinner { to { transform: rotate(360deg); } }