/**
* Site-wide loading/fetching feedback: a gold shimmer skeleton for images
* and a spinner for buttons/actions that trigger a fetch, both using the
* design system's documented image-placeholder tone (#C9A573) and accent
* (#B86B0B) - see DESIGN.md.
*
* Generalized from [hero_vertical_slider]'s original per-image shimmer
* (see hero-vertical-slider.css git history); that component, the blog
* "load more" button, and any future fetch/AJAX feature all consume these
* same classes via assets/js/loading-feedback.js instead of reinventing
* their own load/error tracking or spinner markup.
*/
/* ---- Image skeleton: .amulet-img-loading -> .is-loaded / .is-error ----
* Applied by AmuletLoading.armImage()/.armImages() (loading-feedback.js).
* Component CSS still owns box shape (aspect-ratio, border-radius, object-
* fit) - this only owns the loading/error/reveal visuals. */
.amulet-img-loading {
opacity: 0;
background: linear-gradient(100deg, rgba(201, 165, 115, 0.35) 25%, rgba(201, 165, 115, 0.6) 37%, rgba(201, 165, 115, 0.35) 63%);
background-size: 400% 100%;
animation: amulet-shimmer 1.4s ease-in-out infinite, amulet-img-fallback-reveal 0s linear 1.6s forwards;
transition: opacity 0.35s ease;
}
.amulet-img-loading.is-loaded {
opacity: 1;
animation: none;
background: none;
}
/* Load failures get this flat swatch instead of the browser's broken-image
* icon - the JS swaps the src to a same-color inline SVG so the ![]()
* still "loads" successfully rather than trying to hide a broken element. */
.amulet-img-loading.is-error {
opacity: 1;
animation: none;
background: #C9A573;
}
@keyframes amulet-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Pure-CSS safety net: if the arming JS never resolves an image (listener
* never fires - not expected, but cheap insurance), it still reveals on its
* own after 1.6s instead of staying invisible forever. No-op once JS gets
* there first, since .is-loaded/.is-error set animation:none. */
@keyframes amulet-img-fallback-reveal {
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.amulet-img-loading { animation: amulet-img-fallback-reveal 0s linear 1.6s forwards !important; }
.amulet-img-loading.is-loaded,
.amulet-img-loading.is-error { animation: none !important; }
}
/* ---- Button spinner-overlay: .amulet-btn-loading ----
* For buttons/actions that trigger a fetch and have no fixed content shape
* to skeleton. Keeps the button's own label in the DOM (so screen readers
* still announce it) but visually swaps it for a spinner via
* color:transparent rather than removing it, so the button doesn't change
* size. Toggle via AmuletLoading.setButtonLoading(button, isLoading). */
.amulet-btn-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.amulet-btn-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
margin: -0.5em 0 0 -0.5em;
border: 2px solid rgba(184, 107, 11, 0.3);
border-top-color: #B86B0B;
border-radius: 50%;
animation: amulet-spin 0.7s linear infinite;
}
@keyframes amulet-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.amulet-btn-loading::after { animation-duration: 1.4s; }
}
/* ---- WooCommerce add-to-cart ----
* WooCommerce's own JS (plugins/woocommerce/assets/js/frontend/add-to-
* cart.js) already toggles .loading on [class*="add_to_cart_button"] for
* the exact duration of the AJAX request and removes it in both the
* success and failure path - there's no reason to duplicate that mechanism
* with our own JS. Only its default look (opacity:.25 + an inherited-color
* spin glyph) needed to change to match this palette.
*
* Matches WooCommerce's own [class*="..."] attribute-selector approach
* rather than `.woocommerce a.button.loading` - `.woocommerce` lands on
* itself on shop/archive pages but on a wrapping elsewhere
* (single product, [products] shortcode), so a descendant-combinator
* selector built on it silently never matches on archive pages (caught
* live: computed color stayed WooCommerce's default there). The repeated
* .loading.loading bumps specificity by one class - enough to beat
* WooCommerce's equal-weight attribute selector regardless of stylesheet
* load order - without assuming anything about DOM structure. */
[class*="add_to_cart_button"].loading.loading {
opacity: 0.6;
}
[class*="add_to_cart_button"].loading.loading::after {
color: #B86B0B;
}