/* ============================================================ Joydeco.css JSON-powered sticky product slider for www.the-hurds.net Intended server location: /assets/css/Joydeco.css ------------------------------------------------------------ Viewer behavior: - Sticky ad slider remains at the bottom of the page. - Wider screens show 3 Joydeco product cards at a time. - Narrow/mobile screens show 1 Joydeco product card at a time. - The hollow up-arrow button expands the sticky ad into a fuller div. - The hollow down-arrow button collapses it again. - Product image, product name, and description are all clickable. ============================================================ */ /* ------------------------------------------------------------ Page breathing room ------------------------------------------------------------ The JavaScript adds this class to only when the slider successfully initializes. This prevents the CSS file from changing unrelated pages where the Joydeco slider is not used. ------------------------------------------------------------ */ body.joydeco-sticky-active { padding-bottom: 155px; } body.joydeco-sticky-active.joydeco-sticky-expanded { padding-bottom: 255px; } @media (max-width: 760px) { body.joydeco-sticky-active { padding-bottom: 130px; } body.joydeco-sticky-active.joydeco-sticky-expanded { padding-bottom: 235px; } } /* ------------------------------------------------------------ Main fixed sticky slider shell ------------------------------------------------------------ */ .joydeco-sticky-slider { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; box-sizing: border-box; padding: 12px 16px 14px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid #ddd; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.14); font-family: Arial, Helvetica, sans-serif; transition: max-height 0.28s ease, padding 0.28s ease, box-shadow 0.28s ease; } .joydeco-sticky-slider[hidden] { display: none !important; } /* ------------------------------------------------------------ Collapsed and expanded states ------------------------------------------------------------ Collapsed = compact sticky slider. Expanded = fuller ad div with larger images and descriptions. ------------------------------------------------------------ */ .joydeco-sticky-slider.is-collapsed { max-height: 135px; } .joydeco-sticky-slider.is-expanded { max-height: 285px; padding-top: 18px; box-shadow: 0 -7px 28px rgba(0, 0, 0, 0.18); } @media (max-width: 760px) { .joydeco-sticky-slider.is-collapsed { max-height: 112px; } .joydeco-sticky-slider.is-expanded { max-height: 255px; } } /* ------------------------------------------------------------ Hollow arrow expand/collapse button ------------------------------------------------------------ The button deliberately uses hollow triangle characters: △ for expanded upward action, ▽ for collapse downward action. ------------------------------------------------------------ */ .joydeco-slider-toggle { position: absolute; top: -36px; right: 18px; width: 46px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-bottom: none; border-radius: 14px 14px 0 0; background: rgba(255, 255, 255, 0.97); color: #333; font-size: 1.3rem; line-height: 1; font-weight: normal; cursor: pointer; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); } .joydeco-slider-toggle:hover, .joydeco-slider-toggle:focus { background: #fff; outline: none; color: #000; } /* ------------------------------------------------------------ Slider width limiter ------------------------------------------------------------ */ .joydeco-slider-inner { max-width: 1180px; margin: 0 auto; } /* ------------------------------------------------------------ Small label above the product cards ------------------------------------------------------------ */ .joydeco-slider-label { margin: 0 0 7px; font-size: 0.74rem; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase; color: #777; } .joydeco-sticky-slider.is-collapsed .joydeco-slider-label { display: none; } /* ------------------------------------------------------------ Product-card grid / slider stage ------------------------------------------------------------ JavaScript inserts either 3 cards for wider screens or 1 card for mobile screens. ------------------------------------------------------------ */ .joydeco-slider-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; } @media (max-width: 760px) { .joydeco-slider-stage { grid-template-columns: 1fr; gap: 8px; } } /* ------------------------------------------------------------ Individual product card ------------------------------------------------------------ */ .joydeco-product-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: center; box-sizing: border-box; min-width: 0; padding: 9px; background: #fff; border: 1px solid #e2e2e2; border-radius: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; } .joydeco-sticky-slider.is-expanded .joydeco-product-card { grid-template-columns: 112px minmax(0, 1fr); align-items: start; padding: 12px; } @media (max-width: 760px) { .joydeco-product-card { grid-template-columns: 70px minmax(0, 1fr); gap: 9px; padding: 8px; } .joydeco-sticky-slider.is-expanded .joydeco-product-card { grid-template-columns: 94px minmax(0, 1fr); padding: 10px; } } /* ------------------------------------------------------------ Link reset for this slider ------------------------------------------------------------ This is important on the-hurds.net because the global CSS may apply dotted borders or other link treatments to anchors. ------------------------------------------------------------ */ .joydeco-sticky-slider a, .joydeco-sticky-slider a:visited, .joydeco-sticky-slider a:hover, .joydeco-sticky-slider a:active { border-bottom: none !important; text-decoration: none; } /* ------------------------------------------------------------ Product image link and image ------------------------------------------------------------ */ .joydeco-product-image-link { display: block; width: 82px; height: 82px; } .joydeco-product-image-link img, .joydeco-product-image-placeholder { display: block; width: 82px; height: 82px; object-fit: cover; border: 1px solid #ddd; border-radius: 12px; background: #f7f7f7; } .joydeco-sticky-slider.is-expanded .joydeco-product-image-link, .joydeco-sticky-slider.is-expanded .joydeco-product-image-link img, .joydeco-sticky-slider.is-expanded .joydeco-product-image-placeholder { width: 112px; height: 112px; } .joydeco-product-image-link:hover img, .joydeco-product-image-link:focus img { border-color: #aaa; } .joydeco-product-image-placeholder { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 6px; color: #777; font-size: 0.72rem; line-height: 1.15; text-align: center; } @media (max-width: 760px) { .joydeco-product-image-link, .joydeco-product-image-link img, .joydeco-product-image-placeholder { width: 70px; height: 70px; } .joydeco-sticky-slider.is-expanded .joydeco-product-image-link, .joydeco-sticky-slider.is-expanded .joydeco-product-image-link img, .joydeco-sticky-slider.is-expanded .joydeco-product-image-placeholder { width: 94px; height: 94px; } } /* ------------------------------------------------------------ Product text area ------------------------------------------------------------ */ .joydeco-product-text { min-width: 0; } .joydeco-product-name-link, .joydeco-product-description-link { display: block; color: #222 !important; } .joydeco-product-name-link:hover .joydeco-product-name, .joydeco-product-name-link:focus .joydeco-product-name, .joydeco-product-description-link:hover .joydeco-product-description, .joydeco-product-description-link:focus .joydeco-product-description { text-decoration: underline; } .joydeco-product-name { margin: 0 0 4px; font-size: 0.92rem; line-height: 1.18; font-weight: 700; color: #222; } .joydeco-product-description { margin: 0; font-size: 0.78rem; line-height: 1.26; color: #555; } .joydeco-sticky-slider.is-collapsed .joydeco-product-description-link { display: none; } .joydeco-sticky-slider.is-expanded .joydeco-product-description-link { display: block; } @media (max-width: 760px) { .joydeco-product-name { font-size: 0.86rem; } .joydeco-product-description { font-size: 0.75rem; } } /* ------------------------------------------------------------ Product price / CTA row ------------------------------------------------------------ */ .joydeco-product-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 5px; font-size: 0.74rem; line-height: 1.2; } .joydeco-product-price { color: #444; font-weight: 700; } .joydeco-product-cta { color: #8a4b24; font-weight: 700; } /* ------------------------------------------------------------ Loading / unavailable status ------------------------------------------------------------ */ .joydeco-slider-status { grid-column: 1 / -1; box-sizing: border-box; padding: 12px; background: #fff; border: 1px solid #e2e2e2; border-radius: 15px; color: #555; font-size: 0.86rem; line-height: 1.35; } /* ------------------------------------------------------------ Reduced motion preference ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .joydeco-sticky-slider { transition: none; } }