/* ========================================================================== ARC GAMES — Buttons Sistema global de botones Mobile First ========================================================================== */ /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ .arc-btn, .single-product div.product form.cart .single_add_to_cart_button, .woocommerce-cart .wc-block-cart__submit-button, .woocommerce-checkout .wc-block-components-checkout-place-order-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: fit-content; max-width: 100%; padding: 0.75rem 1.25rem; border: 1px solid transparent; background: transparent; color: #ffffff; font-family: var(--arc-font-heading); font-size: 0.95rem; font-weight: 400; line-height: 1.2; text-align: center; text-transform: uppercase; text-decoration: none; white-space: normal; cursor: pointer; /* * Superior izquierda y inferior derecha: * recorte pronunciado de 45°. */ clip-path: polygon( 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px ); transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, filter 200ms ease; } /* -------------------------------------------------------------------------- PRIMARY -------------------------------------------------------------------------- */ .arc-btn-primary, .single-product div.product form.cart .single_add_to_cart_button, .woocommerce-cart .wc-block-cart__submit-button, .woocommerce-checkout .wc-block-components-checkout-place-order-button { background: var(--arc-primary); border-color: var(--arc-primary); color: #ffffff; } .arc-btn-primary:hover, .single-product div.product form.cart .single_add_to_cart_button:hover, .woocommerce-cart .wc-block-cart__submit-button:hover, .woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { background: var(--arc-primary); border-color: var(--arc-primary); color: #000000; box-shadow: 0 0 8px rgba(0, 229, 255, 0.75), 0 0 20px rgba(0, 229, 255, 0.50), 0 0 40px rgba(0, 229, 255, 0.25); } /* -------------------------------------------------------------------------- SECONDARY -------------------------------------------------------------------------- */ .arc-btn-secondary { position: relative; background: var(--arc-bg-panel); border-color: transparent; color: #ffffff; isolation: isolate; } /* Borde exterior */ .arc-btn-secondary::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--arc-primary); clip-path: polygon( 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px ); } /* Superficie interior */ .arc-btn-secondary::after { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--arc-bg-panel); clip-path: polygon( 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px ); } /* Hover */ .arc-btn-secondary:hover { color: #000000; box-shadow: 0 0 8px rgba(0, 229, 255, 0.75), 0 0 20px rgba(0, 229, 255, 0.50); } .arc-btn-secondary:hover::after { background: var(--arc-primary); } /* -------------------------------------------------------------------------- OUTLINE -------------------------------------------------------------------------- */ .arc-btn-outline { position: relative; background: transparent; border-color: transparent; color: rgba(0, 229, 255, 0.45); isolation: isolate; } /* Borde exterior */ .arc-btn-outline::before { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(0, 229, 255, 0.45); clip-path: polygon( 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px ); } /* Superficie interior */ .arc-btn-outline::after { content: ""; position: absolute; inset: 1px; z-index: -1; background: rgba(8, 10, 13, 0.75); clip-path: polygon( 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px ); } /* Hover */ .arc-btn-outline:hover { color: #000000; box-shadow: 0 0 8px rgba(0, 229, 255, 0.75), 0 0 20px rgba(0, 229, 255, 0.50); } .arc-btn-outline:hover::before { background: var(--arc-primary); } .arc-btn-outline:hover::after { background: var(--arc-primary); } /* -------------------------------------------------------------------------- SMALL -------------------------------------------------------------------------- */ .arc-btn-small { min-height: 36px; padding: 0.55rem 0.9rem; font-size: 0.8rem; clip-path: polygon( 9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px ); } /* -------------------------------------------------------------------------- Focus -------------------------------------------------------------------------- */ .arc-btn:focus-visible, .single-product div.product form.cart .single_add_to_cart_button:focus-visible, .woocommerce-cart .wc-block-cart__submit-button:focus-visible, .woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible { outline: 2px solid var(--arc-primary-light); outline-offset: 4px; } /* -------------------------------------------------------------------------- Active / click -------------------------------------------------------------------------- */ .arc-btn:active, .single-product div.product form.cart .single_add_to_cart_button:active, .woocommerce-cart .wc-block-cart__submit-button:active, .woocommerce-checkout .wc-block-components-checkout-place-order-button:active { filter: brightness(0.9); } /* -------------------------------------------------------------------------- Disabled -------------------------------------------------------------------------- */ .arc-btn:disabled, .arc-btn.disabled, .arc-btn[aria-disabled="true"], .single-product div.product form.cart .single_add_to_cart_button:disabled, .single-product div.product form.cart .single_add_to_cart_button.disabled, .single-product div.product form.cart .single_add_to_cart_button[aria-disabled="true"], .woocommerce-cart .wc-block-cart__submit-button:disabled, .woocommerce-cart .wc-block-cart__submit-button[aria-disabled="true"], .woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled, .woocommerce-checkout .wc-block-components-checkout-place-order-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .arc-btn, .single-product div.product form.cart .single_add_to_cart_button, .woocommerce-cart .wc-block-cart__submit-button, .woocommerce-checkout .wc-block-components-checkout-place-order-button { transition: none; } } /* -------------------------------------------------------------------------- WOOCOMMERCE — BUTTON ADAPTERS WooCommerce does not expose a class filter for every native block action. The single-product submit, Cart checkout action and Checkout place-order action are therefore connected to the approved ARC base + primary rules by selector only. WooCommerce keeps ownership of the underlying behaviour. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- ARC / WORDPRESS-WOOCOMMERCE PRIORITY -------------------------------------------------------------------------- */ .wp-block-button__link.wp-element-button.arc-btn, .wp-block-button__link.wc-block-components-product-button__button.arc-btn, .wp-element-button.wc-block-components-product-button__button.arc-btn, .woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link.arc-btn { border-radius: 0; clip-path: polygon( 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px ); } /* -------------------------------------------------------------------------- PRODUCT CARD — SIZE VARIANT -------------------------------------------------------------------------- */ .arc-btn-card { width: 72%; min-height: 36px; padding: 0.25rem 0.5rem; }