/* HBYT_BUTTON_EFFECTS_20260911_V1 * Interaction visuals only. Load after the existing front-end styles. * No dimensions, spacing, display, positioning, grid, URLs or action changes. * No generic button transform; carousel positioning and overlays stay untouched. * Existing SEND ENQUIRY shine remains owned by hbyt-contact-form.css. */ :root { --hbyt-feedback-ring: rgba(215, 95, 40, .22); --hbyt-feedback-shadow: rgba(67, 38, 22, .14); --hbyt-feedback-focus: #1768a1; --hbyt-feedback-speed: 160ms; --hbyt-feedback-hover-shadow: 0 0 0 3px var(--hbyt-feedback-ring), 0 4px 11px var(--hbyt-feedback-shadow); --hbyt-feedback-focus-offset: 3px; } /* A thumbnail track clips outside shadows: customize values, not selector priority. */ .hbyt-thumb { --hbyt-feedback-hover-shadow: inset 0 0 0 2px var(--hbyt-theme-accent, #d75f28); --hbyt-feedback-focus-offset: -3px; } /* Named controls only. The submit shine and back-to-top transition are preserved. */ :is( .hbyt-thumb-arrow, .hbyt-thumb, .hbyt-option, .hbyt-primary-actions > .hbyt-whatsapp-inquiry, .hbyt-primary-actions > .hbyt-contact-inquiry, .hbyt-primary-actions > .hbyt-add-inquiry, .hbyt-share-button, #index-body .i-product .swiper-button-prev, #index-body .i-product .swiper-button-next, #index-body .i-product .product-more > a, #index-body p.more > a, #hbytHomePopupClose, .hbyt-inquiry-nav, #hbyt-mobile-toggle, #hbyt-mobile-close, .hbyt-submenu-toggle, #header .h-search, #header .search-box > .close, .hbytu-search-submit-icon, .hbytu-search-results-form button[type="submit"], .pagebar a.page-link:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .pagebar a.page-num:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbytu-search-pagination-links a:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbyt-product-card-link, .hbytu-search-result-link, .hbyt-sidebar-contact-actions > a, .hbyt-category-quote, .hbil-close, .hbil-button, .hbil-remove, .hbil-specs > summary, .hbyt-inquiry-continue, .hbyt-mobile-inquiry > a, .hbyt-refresh-code, .hbyt-order-details > summary, .hbytu-cookie-actions > button, #hbytuCookieSettings, #hbytuSocialSidebar .social-item, #maximg .hbyt-buyer-button, .hbyt-about-factory-shell .hbyt-af-cta, #footer.hbytu-rich-footer .hbytu-footer-action ) { transition-property: background-color, border-color, color, box-shadow, filter; transition-duration: var(--hbyt-feedback-speed); transition-timing-function: ease-out; } /* A quiet ring and shadow makes existing color changes easier to notice. * No hover effect is newly introduced on touch-only/coarse-pointer devices. */ @media (hover: hover) and (pointer: fine) { :is( .hbyt-thumb-arrow, .hbyt-thumb, .hbyt-option, .hbyt-primary-actions > .hbyt-whatsapp-inquiry, .hbyt-primary-actions > .hbyt-contact-inquiry, .hbyt-primary-actions > .hbyt-add-inquiry, .hbyt-share-button, #index-body .i-product .swiper-button-prev, #index-body .i-product .swiper-button-next, #index-body .i-product .product-more > a, #index-body p.more > a, #hbytHomePopupClose, .hbyt-inquiry-nav, #hbyt-mobile-toggle, #hbyt-mobile-close, .hbyt-submenu-toggle, #header .h-search, #header .search-box > .close, .hbytu-search-submit-icon, .hbytu-search-results-form button[type="submit"], .pagebar a.page-link:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .pagebar a.page-num:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbytu-search-pagination-links a:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbyt-product-card-link, .hbytu-search-result-link, .hbyt-sidebar-contact-actions > a, .hbyt-category-quote, .hbil-close, .hbil-button, .hbil-remove, .hbil-specs > summary, .hbyt-inquiry-continue, .hbyt-mobile-inquiry > a, .hbyt-refresh-code, .hbyt-order-details > summary, .hbytu-cookie-actions > button, #hbytuCookieSettings, #footer.hbytu-rich-footer .hbytu-footer-social a, #footer.hbytu-rich-footer .hbytu-footer-wechat, #hbytuSocialSidebar .social-item, #hbytuBackToTop, #maximg .hbyt-buyer-button, .hbyt-about-factory-shell .hbyt-af-cta, #footer.hbytu-rich-footer .hbytu-footer-action ):not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled, .is-busy, .is-loading, .swiper-button-disabled, .swiper-button-lock, [aria-busy="true"] *):hover { box-shadow: var(--hbyt-feedback-hover-shadow); } /* The small gallery arrows were missing a clear enabled hover state. */ .hbyt-thumb-arrow:not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled, .is-busy, .is-loading, .swiper-button-disabled, .swiper-button-lock, [aria-busy="true"] *):hover { background-color: var(--hbyt-theme-accent, #d75f28); border-color: var(--hbyt-theme-accent, #d75f28); color: #fff; } /* A full-size child image can cover inset shadows; the existing 1px border * is the reliable hover cue. Selected thumbnails keep their own 2px border. */ .hbyt-thumb:not(.is-active):not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled, .is-busy, .is-loading, .swiper-button-disabled, .swiper-button-lock, [aria-busy="true"] *):hover { border-color: var(--hbyt-theme-accent, #d75f28); } /* White utility buttons get a subtle tint without replacing search icon images. */ :is(.hbil-close, .hbyt-refresh-code, #hbyt-mobile-toggle, #hbyt-mobile-close, .hbyt-submenu-toggle):not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled, .is-busy, .is-loading, .swiper-button-disabled, .swiper-button-lock, [aria-busy="true"] *):hover { background-color: #fff5ed; border-color: var(--hbyt-theme-accent, #d75f28); } } /* A pressed inset is stable on both mouse and touch. No moving hit areas. */ :is( .hbyt-thumb-arrow, .hbyt-thumb, .hbyt-option, .hbyt-primary-actions > .hbyt-whatsapp-inquiry, .hbyt-primary-actions > .hbyt-contact-inquiry, .hbyt-primary-actions > .hbyt-add-inquiry, .hbyt-share-button, #index-body .i-product .swiper-button-prev, #index-body .i-product .swiper-button-next, #index-body .i-product .product-more > a, #index-body p.more > a, #hbytHomePopupClose, .hbyt-inquiry-nav, #hbyt-mobile-toggle, #hbyt-mobile-close, .hbyt-submenu-toggle, #header .h-search, #header .search-box > .close, .hbytu-search-submit-icon, .hbytu-search-results-form button[type="submit"], .pagebar a.page-link:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .pagebar a.page-num:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbytu-search-pagination-links a:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbyt-product-card-link, .hbytu-search-result-link, .hbyt-sidebar-contact-actions > a, .hbyt-category-quote, .hbil-close, .hbil-button, .hbil-remove, .hbil-specs > summary, .hbyt-inquiry-continue, .hbyt-mobile-inquiry > a, .hbyt-refresh-code, .hbyt-order-details > summary, .hbytu-cookie-actions > button, #hbytuCookieSettings, #footer.hbytu-rich-footer .hbytu-footer-social a, #footer.hbytu-rich-footer .hbytu-footer-wechat, #hbytuSocialSidebar .social-item, #hbytuBackToTop, #maximg .hbyt-buyer-button, .hbyt-about-factory-shell .hbyt-af-cta, #footer.hbytu-rich-footer .hbytu-footer-action ):not(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled, .is-busy, .is-loading, .swiper-button-disabled, .swiper-button-lock, [aria-busy="true"] *):active { box-shadow: inset 0 2px 5px rgba(51, 32, 19, .25), 0 0 0 2px var(--hbyt-feedback-ring); transition-duration: 70ms; } /* Respect the existing SEND ENQUIRY hover/active/shine, adding keyboard clarity. */ :is( .hbyt-thumb-arrow, .hbyt-thumb, .hbyt-option, .hbyt-primary-actions > .hbyt-whatsapp-inquiry, .hbyt-primary-actions > .hbyt-contact-inquiry, .hbyt-primary-actions > .hbyt-add-inquiry, .hbyt-share-button, #index-body .i-product .swiper-button-prev, #index-body .i-product .swiper-button-next, #index-body .i-product .product-more > a, #index-body p.more > a, #hbytHomePopupClose, .hbyt-inquiry-nav, #hbyt-mobile-toggle, #hbyt-mobile-close, .hbyt-submenu-toggle, #header .h-search, #header .search-box > .close, .hbytu-search-submit-icon, .hbytu-search-results-form button[type="submit"], .pagebar a.page-link:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .pagebar a.page-num:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbytu-search-pagination-links a:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbyt-product-card-link, .hbytu-search-result-link, .hbyt-sidebar-contact-actions > a, .hbyt-category-quote, .hbil-close, .hbil-button, .hbil-remove, .hbil-specs > summary, .hbyt-inquiry-continue, .hbyt-mobile-inquiry > a, .hbyt-refresh-code, .hbyt-order-details > summary, .hbytu-cookie-actions > button, #hbytuCookieSettings, #footer.hbytu-rich-footer .hbytu-footer-social a, #footer.hbytu-rich-footer .hbytu-footer-wechat, #hbytuSocialSidebar .social-item, #hbytuBackToTop, #maximg .hbyt-buyer-button, .hbyt-about-factory-shell .hbyt-af-cta, #footer.hbytu-rich-footer .hbytu-footer-action, .hbyt-contact-page #tj, #mobile .menu-list a[href] ):focus-visible { outline: 3px solid var(--hbyt-feedback-focus) !important; outline-offset: var(--hbyt-feedback-focus-offset) !important; } /* Busy/disabled controls never acquire a new hover/pressed animation. * Preserve each component's disabled opacity/cursor and all functional attributes. * A focus ring can remain on a control that became busy during keyboard use. */ :is( .hbyt-thumb-arrow, .hbyt-thumb, .hbyt-option, .hbyt-primary-actions > .hbyt-whatsapp-inquiry, .hbyt-primary-actions > .hbyt-contact-inquiry, .hbyt-primary-actions > .hbyt-add-inquiry, .hbyt-share-button, #index-body .i-product .swiper-button-prev, #index-body .i-product .swiper-button-next, #index-body .i-product .product-more > a, #index-body p.more > a, #hbytHomePopupClose, .hbyt-inquiry-nav, #hbyt-mobile-toggle, #hbyt-mobile-close, .hbyt-submenu-toggle, #header .h-search, #header .search-box > .close, .hbytu-search-submit-icon, .hbytu-search-results-form button[type="submit"], .pagebar a.page-link:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .pagebar a.page-num:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbytu-search-pagination-links a:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbyt-product-card-link, .hbytu-search-result-link, .hbyt-sidebar-contact-actions > a, .hbyt-category-quote, .hbil-close, .hbil-button, .hbil-remove, .hbil-specs > summary, .hbyt-inquiry-continue, .hbyt-mobile-inquiry > a, .hbyt-refresh-code, .hbyt-order-details > summary, .hbytu-cookie-actions > button, #hbytuCookieSettings, #footer.hbytu-rich-footer .hbytu-footer-social a, #footer.hbytu-rich-footer .hbytu-footer-wechat, #hbytuSocialSidebar .social-item, #hbytuBackToTop, #maximg .hbyt-buyer-button, .hbyt-about-factory-shell .hbyt-af-cta, #footer.hbytu-rich-footer .hbytu-footer-action, .hbyt-contact-page #tj ):is(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"], .disabled, .is-disabled, .is-busy, .is-loading, .swiper-button-disabled, .swiper-button-lock, [aria-busy="true"] *) { animation: none !important; transition: none !important; box-shadow: none !important; } .hbyt-thumb-arrow:disabled, .hbyt-thumb-arrow[aria-disabled="true"] { background-color: #fff; border-color: var(--hbyt-theme-border, #e6d9d0); color: var(--hbyt-theme-accent, #d75f28); } /* Pagination status indicators are not new action targets. Existing markup stays. */ .pagebar a.page-link[href^="javascript:"], .pagebar [aria-disabled="true"], .pagebar .page-num-current, .hbytu-search-pagination-links .page-num-current, .hbytu-search-pagination-links [aria-current="page"] { animation: none; transition: none; } @media (prefers-reduced-motion: reduce) { :is( .hbyt-thumb-arrow, .hbyt-thumb, .hbyt-option, .hbyt-primary-actions > .hbyt-whatsapp-inquiry, .hbyt-primary-actions > .hbyt-contact-inquiry, .hbyt-primary-actions > .hbyt-add-inquiry, .hbyt-share-button, #index-body .i-product .swiper-button-prev, #index-body .i-product .swiper-button-next, #index-body .i-product .product-more > a, #index-body p.more > a, #hbytHomePopupClose, .hbyt-inquiry-nav, #hbyt-mobile-toggle, #hbyt-mobile-close, .hbyt-submenu-toggle, #header .h-search, #header .search-box > .close, .hbytu-search-submit-icon, .hbytu-search-results-form button[type="submit"], .pagebar a.page-link:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .pagebar a.page-num:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbytu-search-pagination-links a:not([href^="javascript:"], [aria-current="page"], .active, .current, .page-num-current), .hbyt-product-card-link, .hbytu-search-result-link, .hbyt-sidebar-contact-actions > a, .hbyt-category-quote, .hbil-close, .hbil-button, .hbil-remove, .hbil-specs > summary, .hbyt-inquiry-continue, .hbyt-mobile-inquiry > a, .hbyt-refresh-code, .hbyt-order-details > summary, .hbytu-cookie-actions > button, #hbytuCookieSettings, #footer.hbytu-rich-footer .hbytu-footer-social a, #footer.hbytu-rich-footer .hbytu-footer-wechat, #hbytuSocialSidebar .social-item, #hbytuBackToTop, #maximg .hbyt-buyer-button, .hbyt-about-factory-shell .hbyt-af-cta, #footer.hbytu-rich-footer .hbytu-footer-action, .hbyt-contact-page #tj ) { animation: none !important; transition: none !important; } /* Stop the existing decorative sweep when the visitor requests less motion. */ .hbyt-contact-page #tj { background-image: none !important; transform: none !important; } /* These two existing hover lifts are decorative, not positioning transforms. */ #footer.hbytu-rich-footer .hbytu-footer-social a, #footer.hbytu-rich-footer .hbytu-footer-wechat { transform: none !important; } }