/* * db-styled-carousel.css v1.2.2 * * Styles Miva's mmx-product-carousel web component to match the Delicious * Boutique theme using ::part() selectors. Site tokens (custom properties) * pass into the shadow DOM, so names, prices and the button follow the text * size, bolder and high contrast modes. * * The .featured-products heading and .frill are in the Light DOM and styled * by the global styles.css. * * Things page CSS cannot reach (arrow placement, arrow focus ring, card focus * ring, single tab stop per card) are handled in db-styled-carousel.js. */ /* -- Outer wrapper - clips the slider's extra right edge -- */ .db-styled-carousel { display: block; width: 100%; clear: both; overflow: hidden; } /* -- Text size cap -- * The carousel grows with the 125% text size mode. In the 150% mode it stays * at the 125% sizes so the cards and button do not get oversized. */ html[data-text-size="150"] .db-styled-carousel { --font-size-lg: calc(18px * 1.25); --font-size-xl: calc(20px * 1.1); --font-size-2xl: calc(25px * 1.1); } /* -- Carousel position -- v1.2.1: the slider's card gap is set to 0 in the template (data-gap="0"), so the cards sit edge to edge in the slider's own math and the last page lines up with the right edge. Before, the slider kept a 16px gap that the card styles removed, and the carousel was shifted 16px right to hide it, which cut 16px off the last card on the last page. margin-left:-1px tucks the first card's divider line just outside the clipped left edge, so only the dividers between cards show. -- */ .db-styled-carousel .db-styled-carousel__carousel { display: block; margin-top: 20px !important; margin-bottom: 0 !important; margin-left: -1px !important; margin-right: 0 !important; } /* -- Focus colors -- * Miva's own focus color is blue (#3A58FC). The arrows and dots use the site * focus color instead (red, black in high contrast). The arrow ring itself is * drawn by db-styled-carousel.js, so Miva's outline is turned off here. */ mmx-product-carousel.db-styled-carousel__carousel { --mmx-color-focus: var(--color-focus, #c32b2a); --mmx-button-outline--focus: none; } /* -- Product name -- */ mmx-product-carousel.db-styled-carousel__carousel::part(product-name) { font-family: var(--font-primary, Lato, sans-serif) !important; font-size: var(--font-size-2xl, 25px) !important; font-weight: var(--font-weight-bold, 700) !important; color: var(--brand-red, #c32b2a) !important; text-align: center !important; margin: 20px 0 15px 0 !important; } /* -- Underline Links mode -- * The site's html[data-links="underline"] rule cannot reach inside the * carousel's shadow DOM, so the product name (the card link's text) is * underlined here. The Shop Now button keeps its button look. */ html[data-links="underline"] mmx-product-carousel.db-styled-carousel__carousel::part(product-name) { text-decoration: underline !important; text-decoration-thickness: max(1px, 0.06em) !important; text-underline-offset: 0.15em !important; } /* -- Product prices container -- */ mmx-product-carousel.db-styled-carousel__carousel::part(product-prices) { text-align: center !important; margin: 0 0 10px 0 !important; } /* -- Product price -- */ mmx-product-carousel.db-styled-carousel__carousel::part(product-price) { font-family: var(--font-primary, Lato, sans-serif) !important; font-size: var(--font-size-xl, 20px) !important; font-weight: var(--font-weight-bold, 700) !important; color: var(--brand-red, #c32b2a) !important; } /* -- Button host - responsive width, never wider than card -- * min-height (not height) so larger text makes it taller instead of clipping. */ mmx-product-carousel.db-styled-carousel__carousel::part(button) { display: block !important; width: 90% !important; max-width: 300px !important; margin: 0 auto 20px auto !important; height: auto !important; min-height: 33px !important; } /* -- Button inner anchor -- exportparts="button: button__inner" on mmx-button makes this reachable. Absolute URL required - relative paths break from Miva's compiled CSS path. White on the dark red texture is 9.8:1 or better. The button is a visual repeat of the card link: db-styled-carousel.js takes it out of the tab order so each card is one stop. */ mmx-product-carousel.db-styled-carousel__carousel::part(button__inner) { background-image: url('https://www.deliciousboutique.com/mm5/graphics/store-button-background.jpg') !important; background-color: var(--brand-red-dark, #94111e) !important; background-size: cover !important; color: var(--color-white, #ffffff) !important; font-family: var(--font-primary, Lato, sans-serif) !important; font-size: var(--font-size-lg, 18px) !important; font-weight: var(--font-weight-black, 900) !important; text-transform: uppercase !important; text-align: center !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: auto !important; min-height: 33px !important; padding: 6px 15px !important; border-radius: 0 !important; letter-spacing: normal !important; border: none !important; box-sizing: border-box !important; line-height: 1.2 !important; } /* -- Wrapper - transparent bg -- */ mmx-product-carousel.db-styled-carousel__carousel::part(wrapper) { background: transparent !important; padding: 0 !important; } /* -- Divider lines between product cards -- MMX applies padding-left:16px to each slide by default, which offsets all card content 16px to the right. Setting padding-left:0 removes this and lets content fill the full card width correctly. border-left draws at the left edge of each slide. The first visible card's border-left sits at -1px, clipped by the outer overflow:hidden wrapper - so only dividers between cards are visible. -- */ mmx-product-carousel.db-styled-carousel__carousel::part(hero_slide) { padding-left: 0 !important; padding-right: 0 !important; margin-right: 0 !important; box-shadow: none !important; border-right: none !important; border-left: 1px solid var(--color-black, #000000) !important; overflow: hidden !important; } /* -- Slider - no padding -- */ mmx-product-carousel.db-styled-carousel__carousel::part(slider) { padding: 0 !important; }