/* ========================================================================== MB R5 POLISH - 13 Aug 2026 Enqueued + filemtime-versioned by novamira-sandbox/mb-r5-polish.php. Four fixes, all measured before they were written. Numbers in the comments are the live "before" values, so the next person can tell whether a rule is still earning its place. ========================================================================== */ /* -- 1. THE BLOSSOM ------------------------------------------------------ Sized in em so the per-petal font-size ladder drives it, filled with currentColor so each surface picks its own colour. */ .mb-blossom { width: 1em; height: 1em; display: block; } .mb-blossom-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .mb-blossom-layer span { position: absolute; top: -44px; opacity: 0; /* Blossom pink, not rose-gold: at 13-18px over Lauren's banner artwork the muted #B76E79 read as grey specks rather than petals. A soft drop-shadow keeps them legible over both the pale banners and the photographic ones. */ color: var(--mb-pink-soft, #F48FB1); filter: drop-shadow(0 1px 2px rgba(122, 46, 69, .18)); animation: mbBlossomFall 17s linear infinite; } .mb-blossom-layer span:nth-child(1) { left: 12%; font-size: 22px; animation-delay: 0s; } .mb-blossom-layer span:nth-child(2) { left: 31%; font-size: 16px; animation-delay: 6s; animation-duration: 21s; } .mb-blossom-layer span:nth-child(3) { left: 53%; font-size: 26px; animation-delay: 3s; animation-duration: 15s; } .mb-blossom-layer span:nth-child(4) { left: 72%; font-size: 17px; animation-delay: 9.5s; animation-duration: 22s; } .mb-blossom-layer span:nth-child(5) { left: 88%; font-size: 23px; animation-delay: 4.5s; animation-duration: 18s; } /* Its own keyframe rather than borrowing mbPetalDrift: the footer's version travels 430px, which overshoots a short banner. */ @keyframes mbBlossomFall { 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; } 12% { opacity: .62; } 55% { transform: translateY(150px) translateX(-16px) rotate(140deg); opacity: .4; } 100% { transform: translateY(300px) translateX(12px) rotate(290deg); opacity: 0; } } /* The footer keeps its own drift and colour - blossom pink reads on the pink wash, where the plum ink the icon inherited did not. */ .mb-footer--sky .mb-footer__petals { color: var(--mb-pink-soft, #F48FB1); } .mb-footer--sky .mb-footer__petals .mb-blossom { width: 1em; height: 1em; } @media (prefers-reduced-motion: reduce) { .mb-blossom-layer span { animation: none; opacity: 0; } } @media (max-width: 767px) { .mb-blossom-layer { display: none; } } /* -- 2. BRIDGE PILL ROW -------------------------------------------------- .mb-bridge-actions__scroll is overflow-x:auto, and overflow-x:auto forces overflow-y to clip as well. Measured: scroller 50px tall, pill 46px, pill top exactly 0px from the scroller top - no headroom at all - while the pill carries a 0 2px 8px shadow that needs ~6px above it. So the top edge and its shadow were sliced off flush. The headroom is added inside the clip box and taken back off the parent, so the row occupies the same 74px it always did. */ .mb-bridge-actions { padding-top: 4px !important; padding-bottom: 4px !important; } .mb-bridge-actions__scroll { padding-top: 10px !important; padding-bottom: 10px !important; scrollbar-width: none; } .mb-bridge-actions__scroll::-webkit-scrollbar { height: 0; } /* -- 3. HOME: FROM THE BLOG ---------------------------------------------- The covers are designed graphics with headline text baked in, but they were requested at woocommerce_thumbnail - 300x300 HARD CROP - and then cropped a second time by object-fit:cover into a 297x220 box. Two crops, so every headline lost its top and one side. Contain on a soft blossom field shows the whole graphic. Title and excerpt are clamped to a fixed number of lines so all four cards share one baseline instead of drifting by a line (card 4's excerpt sat 20px below its neighbours). */ #mb-blog-section .swiper-slide { height: auto; } #mb-blog-section .mb-product-card { height: 100%; } /* !important is required, not decorative: front-page.php's inline block ships `.mb-product-card__image{aspect-ratio:1/1 !important}` and an object-fit:cover companion. !important beats specificity, so an ID selector alone lost - max-height took, aspect-ratio did not. */ #mb-blog-section .mb-product-card__image { aspect-ratio: 4 / 3 !important; height: auto !important; max-height: none !important; background: linear-gradient(160deg, #FFF5F8 0%, #FCE4EC 100%) !important; } #mb-blog-section .mb-product-card__image img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; } /* The card lifts on hover by scaling the image; with contain that pushes the artwork past its box, so the blog rail keeps the lift off. */ #mb-blog-section .mb-product-card:hover .mb-product-card__image img { transform: none !important; } #mb-blog-section .mb-product-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* FIXED height, not min-height: with min-height a two-line title still ran 8px past a one-line one, which pushed that card's excerpt out of line with its neighbours. */ height: 2.6em; line-height: 1.3; margin-bottom: 0; } /* The theme reuses __price for the blog excerpt - it is not a price. */ #mb-blog-section .mb-product-card__price { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.8em; line-height: 1.4; font-weight: 400; } /* -- 4. HOME: REVIEWS ---------------------------------------------------- The slides are review screenshots printed at width:100%;height:auto with max-height:400px, so each card took its own intrinsic height and the rail came out ragged. One shared 4:5 box on a blossom field makes every card the same size with the whole screenshot visible. Matched on the alt text because the section carries no id of its own. */ .swiper-slide img[alt^="MomBoss Review"] { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; max-height: none !important; object-fit: contain !important; background: linear-gradient(160deg, #FFF5F8 0%, #FCE4EC 100%); border-radius: 14px; } @media (max-width: 640px) { #mb-blog-section .mb-product-card__image { aspect-ratio: 3 / 2 !important; } .swiper-slide img[alt^="MomBoss Review"] { aspect-ratio: 1 / 1 !important; } } /* -- 5. MALL: MODE TOGGLE + SEARCH AS ONE CONTROL ------------------------ The two mode buttons sat above the Featured Stores rail while the box you typed into sat either at the very top of the page or buried inside the stores panel - so choosing 'Find a Store' and searching were separated by a whole carousel. They are now one stacked control: pick the mode, then type, with the placeholder and the action following the mode. */ /* The wrap ships display:flex, which made .mb-container shrink to its content - that is why the control came out 362px wide instead of filling the 720px it was given. Back to block so the container behaves. */ .mb-mall-toggle-wrap { display: block !important; padding: 20px 0 24px; } .mb-mall-find { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } .mb-mall-find .mb-mall-toggle { margin: 0; } .mb-mall-find .mb-mall-search { width: 100%; max-width: 100%; margin: 0; } .mb-mall-find .mb-mall-search__inner { width: 100%; } .mb-mall-find .mb-mall-pill svg { vertical-align: -3px; margin-right: 4px; } @media (max-width: 640px) { .mb-mall-find { gap: 10px; } .mb-mall-find .mb-mall-toggle { width: 100%; } } /* -- 6. MALL: FEATURED STORES PAGINATION --------------------------------- Swiper pagination is position:absolute by default, so the dots were painting ON TOP of the store cards - straight through the 'Nairobi' chips. Put them below the rail, the way the review dots already are. */ .mb-featured-dots.swiper-pagination { position: relative !important; bottom: auto !important; left: auto !important; margin-top: 14px; }