/* * Footer styling — background art, news-post image rounding, and the * "Shop Online & In-store" menu arrows. (Background art ported from the old * theme's .site-footer; the two content sections are at the bottom of the file.) * * A page-background -> transparent gradient (fades the top 25% into the page so the * footer blends in) layered over a decorative SVG that swaps by breakpoint: * portrait (-p) variants from base up through 600 / 769, then the landscape (-l) * variant with `cover` at >= 1200px. SVGs live in assets/images/ (copied from the * old theme), so this travels via files — no media-library / attachment-ID step. * * Target = the Beaver Themer footer wrapper `footer.fl-builder-content[data-type="footer"]`. * We deliberately do NOT key off the footer's data-post-id, since that differs * between the clone and live after the Themer layout is imported. * * LIGHT is active. DARK (html.dark-color-scheme) is wired but inert — dark mode is * disabled for launch (see functions.php); these rules light up when it returns. * * NOTE: for the art to show, the footer's BB rows must keep a transparent * background (an opaque row background would paint over this). */ body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] { background-repeat: no-repeat; background-size: 100% auto; background-position: bottom right; background-image: linear-gradient(var(--surface, #fff), transparent 25%, transparent), url("images/footer-bg_light-p.svg"); } @media (min-width: 600px) { body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] { background-image: linear-gradient(var(--surface, #fff), transparent 25%, transparent), url("images/footer-bg_light-p_600.svg"); } } @media (min-width: 769px) { body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] { background-image: linear-gradient(var(--surface, #fff), transparent 25%, transparent), url("images/footer-bg_light-p_769.svg"); } } @media (min-width: 1200px) { body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] { background-size: cover; background-image: linear-gradient(var(--surface, #fff), transparent 25%, transparent), url("images/footer-bg_light-l.svg"); } } /* Dark scheme — inert while dark mode is disabled; ready for the dark-mode pass. background-repeat/size/position are inherited from the light rules above (cover at >= 1200px); only the image (and its dark gradient top) changes. */ html.dark-color-scheme body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] { background-image: linear-gradient(var(--surface, #1d1e25), transparent 25%, transparent), url("images/footer-bg_dark-p.svg"); } @media (min-width: 600px) { html.dark-color-scheme body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] { background-image: linear-gradient(var(--surface, #1d1e25), transparent 25%, transparent), url("images/footer-bg_dark-p_600.svg"); } } @media (min-width: 769px) { html.dark-color-scheme body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] { background-image: linear-gradient(var(--surface, #1d1e25), transparent 25%, transparent), url("images/footer-bg_dark-p_769.svg"); } } @media (min-width: 1200px) { html.dark-color-scheme body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] { background-image: linear-gradient(var(--surface, #1d1e25), transparent 25%, transparent), url("images/footer-bg_dark-l.svg"); } } /* --------------------------------------------------------------------------- * Footer "Latest News" post images — round the featured-image corners to match * the rest of the site's content photos (--gvbf-photo-radius, 14px; defined in * woocommerce.css :root). Covers BB's Posts module in either the feed or grid * layout. Scoped to the Themer footer so post images elsewhere are untouched. * --------------------------------------------------------------------------- */ body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] .fl-post-feed-image img, body.fl-theme-builder-footer footer.fl-builder-content[data-type="footer"] .fl-post-grid-image img { border-radius: var(--gvbf-photo-radius, 14px); } /* --------------------------------------------------------------------------- * Footer "Shop Online & In-store" links — a green arrow before each item. * * Mirrors the live site, where the footer nav menu draws an arrow before every * link. Live used a "skinny" icon-font glyph; that font doesn't exist on the BB * site, so we recreate the same idea as an inline-SVG arrow in brand green. * * HOOK-UP: build that column as a Beaver Builder **Menu module** (like the footer * legal menu) so the items are real links, set its layout to stacked/vertical, and * add the CSS class `gvbf-footer-shop-menu` to the module (Advanced → Class). The * arrow then renders before each link. (Also works on a rich-text