/* * Evidence Trail / catalog actions. * Presentation only: native WooCommerce controls, labels and state remain intact. * The orange / cyan / blue edge echoes the homepage standards connector. * Do not use button pseudo-elements: the theme owns its cart/loading indicators. */ @property --vp-et-catalog-orbit { syntax: ""; inherits: false; initial-value: 0deg; } /* Unsupported typed properties stay visually static: 0deg and 360deg match. */ @keyframes vp-et-catalog-outline-enter { from { --vp-et-catalog-orbit: 0deg; } to { --vp-et-catalog-orbit: 360deg; } } @keyframes vp-et-catalog-outline-interact { from { --vp-et-catalog-orbit: 0deg; } to { --vp-et-catalog-orbit: 360deg; } } body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) { --vp-et-catalog-action-top: #102331; --vp-et-catalog-action-bottom: #06121d; --vp-et-catalog-action-edge: linear-gradient(110deg, #ff7433 0%, #3de7f5 52%, #168cff 100%); } body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button, body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button), body.vp-evidence-trail-ui.single-product .vp-pdp-sticky__button { box-sizing: border-box; min-height: 50px; border: 1px solid transparent !important; border-radius: 8px !important; background: linear-gradient(145deg, var(--vp-et-catalog-action-top), var(--vp-et-catalog-action-bottom)) padding-box, conic-gradient(from var(--vp-et-catalog-orbit), transparent 0deg 245deg, rgba(61, 231, 245, 0.12) 270deg, #ff9a67 296deg, #3de7f5 312deg, #efffff 323deg, #61b4ff 334deg, transparent 348deg) border-box, var(--vp-et-catalog-action-edge) border-box !important; color: #f6fbfd !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 12px rgba(61, 231, 245, 0.12), 0 0 18px rgba(255, 116, 51, 0.05), 0 4px 14px rgba(0, 5, 12, 0.2) !important; text-shadow: none; text-decoration: none; transition: box-shadow 180ms ease, color 180ms ease, opacity 180ms ease; animation: vp-et-catalog-outline-enter 2600ms cubic-bezier(0.45, 0, 0.25, 1) 1 both; } body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button) { min-height: 52px; } /* One entrance orbit; another on deliberate interaction. No perpetual loop. */ body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button:is(:hover, :focus-visible):not(:disabled, .disabled, [aria-disabled="true"], .loading, .added), body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button):is(:hover, :focus-visible):not(:disabled, .disabled, [aria-disabled="true"], .loading, .added), body.vp-evidence-trail-ui.single-product .vp-pdp-sticky__button:is(:hover, :focus-visible):not(:disabled, .disabled, [aria-disabled="true"], .loading, .added) { animation: vp-et-catalog-outline-interact 2200ms cubic-bezier(0.45, 0, 0.25, 1) 1 both; } /* Change the surface, not the layout, so labels and native indicators stay crisp. */ body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button:hover:not(:disabled, .disabled, [aria-disabled="true"], .loading, .added), body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button):hover:not(:disabled, .disabled, [aria-disabled="true"], .loading, .added), body.vp-evidence-trail-ui.single-product .vp-pdp-sticky__button:hover:not(:disabled, .disabled, [aria-disabled="true"], .loading, .added) { --vp-et-catalog-action-top: #163449; --vp-et-catalog-action-bottom: #102536; color: #f6fbfd !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(61, 231, 245, 0.2), 0 0 24px rgba(22, 140, 255, 0.1), 0 4px 14px rgba(0, 5, 12, 0.24) !important; } body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button:focus-visible, body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button):focus-visible, body.vp-evidence-trail-ui.single-product .vp-pdp-sticky__button:focus-visible, body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card .added_to_cart.wc-forward:focus-visible { outline: 3px solid #3de7f5 !important; outline-offset: 4px !important; } /* Keep the native loading/added lifecycle, including its original ::after. */ body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button.loading, body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button).loading { opacity: 0.72; animation: none; } body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button.added, body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button).added { --vp-et-catalog-action-top: #0b3034; --vp-et-catalog-action-bottom: #061f27; --vp-et-catalog-action-edge: linear-gradient(110deg, #45c7ac, #65ead6 52%, #168cff); animation: none; } body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button:is(:disabled, .disabled, [aria-disabled="true"]), body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button):is(:disabled, .disabled, [aria-disabled="true"]), body.vp-evidence-trail-ui.single-product .vp-pdp-sticky__button:is(:disabled, .disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: 0.52; box-shadow: none !important; animation: none; } /* The native post-add link stays a distinct, full-width secondary action. */ body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card .added_to_cart.wc-forward { box-sizing: border-box; min-height: 44px !important; padding: 11px 14px !important; border: 1px solid rgba(61, 231, 245, 0.52) !important; border-radius: 8px !important; background: #06121d !important; color: #c8f4f8 !important; box-shadow: none !important; line-height: 20px; text-decoration: none; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; } body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card .added_to_cart.wc-forward:hover { border-color: #3de7f5 !important; background: #102536 !important; color: #f6fbfd !important; } /* Search remains attached to its existing field, with a quieter cyan edge. */ body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat) .vp-catalog-search__btn { min-height: 52px; border: 0 !important; border-left: 1px solid rgba(61, 231, 245, 0.55) !important; border-radius: 0 !important; background: linear-gradient(145deg, #102331, #06121d) !important; color: #f6fbfd !important; box-shadow: none !important; text-shadow: none; transition: color 180ms ease, box-shadow 180ms ease; } body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat) .vp-catalog-search__btn:hover { background: linear-gradient(145deg, #163449, #102536) !important; color: #3de7f5 !important; box-shadow: inset 0 0 18px rgba(61, 231, 245, 0.07) !important; } body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat) .vp-catalog-search__btn:focus-visible { outline: 3px solid #3de7f5 !important; outline-offset: -5px !important; } @media (prefers-reduced-motion: reduce) { body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button, body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button), body.vp-evidence-trail-ui.single-product .vp-pdp-sticky__button, body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card .added_to_cart.wc-forward, body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat) .vp-catalog-search__btn { transition: none; animation: none !important; --vp-et-catalog-orbit: 0deg; } } @media (forced-colors: active) { body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card__footer .vp-product-card__button, body.vp-evidence-trail-ui.single-product .vp-pdp__cart-form :is(button[name="add-to-cart"], .single_add_to_cart_button), body.vp-evidence-trail-ui.single-product .vp-pdp-sticky__button, body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat, .single-product) .vp-product-card .added_to_cart.wc-forward, body.vp-evidence-trail-ui:is(.woocommerce-shop, .tax-product_cat) .vp-catalog-search__btn { border-color: ButtonText !important; background: ButtonFace !important; color: ButtonText !important; box-shadow: none !important; outline-color: Highlight !important; animation: none !important; } }