/* CANONICAL-REV: 2026-09-15.86 The single source for every ET template's bridge. Fixes go HERE, never into a template. A template records the rev it was last checked at; when this rev moves, every template below it is due a re-check. Per-template blocks are debt - see 33-VMT-ET-Template-Modernization-Pipeline.md. */ /* * Serenity template — bs2-bs5-bridge.css * * BS2-to-BS5 visual aliasing for BS2 grid + utility classes that survive in: * (1) custom-HTML module content stored in jos_modules.content * (2) VirtueMart's older view templates that still emit .row-fluid / .span* markup * * The Skill 26 modernize-stack.py helper rewrites BS2 classes in index.php, but * MODULE CONTENT is data not code — those BS2 classes survive intact. Without * this bridge, BS5 doesn't know what .row-fluid / .spanN mean, so module rows * collapse to stacked-vertically block elements. * * This file is loaded LAST in the CSS stack so its rules win the cascade. * * Reference: Avant's avant-fixups.css (early Phase 3b version) — same pattern * applied to module content that contains legacy markup. */ /* ---------- BS2 .row-fluid → BS5 flex row ---------- */ .row-fluid { display: flex; flex-wrap: wrap; margin-right: 0; margin-left: 0; box-sizing: border-box; width: 100%; } /* CS-PATCH: rowfluid-where-completion 2026-07-24 (found on Explore) This block was only PARTIALLY :where()'d in the 2026-07-14 FlatStore refactor (span1/3/6/9/12 + the [class*=span] child block were left at full specificity) — a canonical regression from the parallel-tab nights. The un-:where'd 15px PADDING gutters + BS5 12-col widths beat the BS2-faithful :where() grid below (margins + 14.53/23.08/...%): Explore 768 showed sidebar moduletable 146 vs live 161 and partner logos at HALF size (li.span2 got BS2 width but kept the 15px padding). BS2 used margin-left gutters and NO padding — the :where() standalone .spanN block below owns widths+gutters; this block only keeps the flex-child plumbing. */ .row-fluid > [class*="span"]:where(:not(ul[class*="product"] > *)) { box-sizing: border-box; min-height: 1px; flex: 0 0 auto; /* BS2's real gutter model: margin-left, NOT padding. Must sit at real specificity — reset.css's element-level margin:0 beats a :where() margin (found on Explore browse view: span9 lost its 2.564% gutter and the whole main column sat 29px left of live). */ margin-left: 2.564102564%; } .row-fluid > [class*="span"]:first-child { margin-left: 0; } :where(.row-fluid > .span1) { width: 8.333333%; } :where(.row-fluid > .span2) { width: 16.666667%; } :where(.row-fluid > .span3) { width: 25%; } :where(.row-fluid > .span4) { width: 33.333333%; } :where(.row-fluid > .span5) { width: 41.666667%; } :where(.row-fluid > .span6) { width: 50%; } :where(.row-fluid > .span7) { width: 58.333333%; } :where(.row-fluid > .span8) { width: 66.666667%; } :where(.row-fluid > .span9) { width: 75%; } :where(.row-fluid > .span10) { width: 83.333333%; } :where(.row-fluid > .span11) { width: 91.666667%; } :where(.row-fluid > .span12) { width: 100%; } /* Standalone .spanN (outside .row-fluid) — float-based BS2 behaviour */ /* 2026-07-14 FlatStore: wrapped in :where() so template.css same-specificity overrides (e.g. .sp20 five-across cells) win like they did over load-FIRST BS2. The bridge loads LAST; without :where it hijacked those grids. */ :where(.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12) { box-sizing: border-box; float: left; min-height: 1px; margin-left: 2.564102564%; } :where(.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12):where(:first-child) { margin-left: 0; } :where(.span1) { width: 5.982905983%; } :where(.span2) { width: 14.52991453%; } :where(.span3) { width: 23.07692308%; } :where(.span4) { width: 31.62393162%; } :where(.span5) { width: 40.17094017%; } :where(.span6) { width: 48.71794872%; } :where(.span7) { width: 57.26495726%; } :where(.span8) { width: 65.81196581%; } :where(.span9) { width: 74.35897436%; } :where(.span10) { width: 82.90598291%; } /* 1170-grid %% (was 970-grid px) — fill container, not bunch-left */ :where(.span11) { width: 91.45299145%; } /* 1170-grid %% (was 970-grid px) — fill container, not bunch-left */ :where(.span12) { width: 100%; } /* 1170-grid %% (was 970-grid px) — fill container, not bunch-left */ /* ---------- BS2 .offset* ---------- */ .row-fluid > .offset1 { margin-left: 8.333333%; } .row-fluid > .offset2 { margin-left: 16.666667%; } .row-fluid > .offset3 { margin-left: 25%; } .row-fluid > .offset4 { margin-left: 33.333333%; } .row-fluid > .offset5 { margin-left: 41.666667%; } .row-fluid > .offset6 { margin-left: 50%; } .row-fluid > .offset7 { margin-left: 58.333333%; } .row-fluid > .offset8 { margin-left: 66.666667%; } .row-fluid > .offset9 { margin-left: 75%; } .row-fluid > .offset10 { margin-left: 83.333333%; } .row-fluid > .offset11 { margin-left: 91.666667%; } /* ---------- BS2 .pull-left / .pull-right → BS5 equivalents ---------- */ .pull-left { float: left !important; } .pull-right { float: right !important; } /* ---------- BS2 .hidden-phone / .visible-phone (block context) ---------- */ /* Inline-context (.d-inline d-sm-none / .d-none d-sm-inline) handled in index.php. */ /* These are for div-context usage in module content. */ @media (max-width: 767px) { .hidden-phone { display: none !important; } .visible-phone { display: block !important; } } @media (min-width: 768px) { .visible-phone { display: none !important; } /* .hidden-phone intentionally NOT declared at >=768 — see CS-PATCH: hidden-phone-no-desktop-override (2026-07-24, Explore) */ } /* ---------- BS2 button aliases ---------- */ .btn-inverse { background-color: #212529; border-color: #212529; color: #fff; } .btn-inverse:hover { background-color: #000; border-color: #000; color: #fff; } .btn-default { background-color: #6c757d; border-color: #6c757d; color: #fff; } .btn-default:hover { background-color: #5c636a; border-color: #5c636a; color: #fff; } /* ---------- Mobile responsiveness — collapse multi-col rows on small screens ---------- */ @media (max-width: 767px) { .row-fluid { flex-direction: column; } .row-fluid > [class*="span"] { width: 100% !important; margin-left: 0 !important; } } /* ---------- Sticky header — white background so it stays visible on scroll ---------- */ /* Locked 2026-06-15: The fixed-position #top-handler had no background, so when scrolling over the slideshow / content images the menu blended into the page and got lost. */ #top-handler.fixed, #top-handler.scrolled { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #top-handler.scrolled { background: #ffffff; } /* ---------- Testimonials section — tighten the over-tall gray box ---------- */ /* Locked 2026-06-15: #testimonials .container had min-height: 460px hard-coded. With single-testimonial visible the gray box towers above the content. */ #testimonials .container { min-height: auto; } #testimonials .container .row-fluid { padding: 50px 0px; } #testimonials { margin-bottom: 0; } .customers-box-handler .owl-theme .owl-controls .owl-pagination { margin-top: 10px; } /* ---------- Manufacturers/Partners carousel — reduce gap before pagination dots ---------- */ /* Locked 2026-06-15: Visual gap of ~150px between brand-logo row bottom and the pagination dots. Caused by owl-carousel inheriting auto-height of taller items. */ .man-main-handler { padding-bottom: 0; } .man-main-handler .owl-wrapper-outer { padding: 0; } .man-main-handler .owl-pagination, .moduletable_manufacturers .owl-pagination { margin-top: 10px; } .moduletable_manufacturers .owl-item { padding: 0 10px; } .moduletable_manufacturers .owl-item img { max-height: 80px; width: auto; margin: 0 auto; } /* ---------- Sticky header — white background so it stays visible on scroll ---------- */ /* Locked 2026-06-15: The fixed-position #top-handler had no background, so when scrolling over the slideshow / content images the menu blended into the page and got lost. */ #top-handler.fixed, #top-handler.scrolled { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #top-handler.scrolled { background: #ffffff; } /* ---------- Testimonials section — tighten the over-tall gray box ---------- */ /* Locked 2026-06-15: #testimonials .container had min-height: 460px hard-coded. With single-testimonial visible the gray box towers above the content. */ #testimonials .container { min-height: auto; } #testimonials .container .row-fluid { padding: 50px 0px; } #testimonials { margin-bottom: 0; } .customers-box-handler .owl-theme .owl-controls .owl-pagination { margin-top: 10px; } /* ---------- Manufacturers/Partners carousel — reduce gap before pagination dots ---------- */ /* Locked 2026-06-15: Visual gap of ~150px between brand-logo row bottom and the pagination dots. Caused by owl-carousel inheriting auto-height of taller items. */ .man-main-handler { padding-bottom: 0; } .man-main-handler .owl-wrapper-outer { padding: 0; } .man-main-handler .owl-pagination, .moduletable_manufacturers .owl-pagination { margin-top: 10px; } .moduletable_manufacturers .owl-item { padding: 0 10px; } .moduletable_manufacturers .owl-item img { max-height: 80px; width: auto; margin: 0 auto; } /* ---------- Cart product images — force aspect-ratio preservation ---------- */ /* Locked 2026-06-15: BS5 doesn't auto-apply height:auto to images the way BS4 did. The legacy span.cart-images rule sets width:45px but no height, so under certain parent-height contexts the image stretches vertically into a tall narrow strip. Force aspect ratio + cap height defensively. */ span.cart-images img, .cart-images img, .cart-product-image img, .cartpanel img.featuredProductImage, td .cart-images img { width: 45px !important; height: auto !important; max-height: 60px !important; object-fit: contain; } /* And the mini-cart in header */ .cartpanel .vm_cart_products img, .cartpanel img { width: 45px !important; height: auto !important; max-height: 60px !important; object-fit: contain; } /* ---------- Related-products / "You May Also Be Interested" grid images ---------- */ /* Locked 2026-06-15 (Serenity, Round 5 fix): The VirtueMart cart-bottom related- products block uses `