/* * Sticky footer for the exported UCIT pages. * * On short pages (disclaimer, testimonials, thin service pages) the mega * footer used to stop mid-screen with white space beneath it. This pins it * to the bottom of the viewport when the page is short, and leaves longer * pages exactly as they were. * * Two things about the export make this fiddlier than a textbook sticky * footer, and both are load-bearing below: * * 1. The page structure is not uniform. On 30 of the 32 pages the footer * is a child of #website_boxed; on /cloud-communications/ it is a child * of ; /mega_footer/corporate-footer/ additionally renders a * mega-footer *component* inside its content, which must be left alone. * * 2. WPBakery pulls .vc_row[data-vc-full-width] rows edge-to-edge by * measuring offset().left once on load and applying a matching negative * offset. Turning an ancestor into a flex container can make that single * measurement happen against an unsettled layout, and nothing * re-measures until a window resize — a row silently ends up hundreds of * pixels off to the left. Giving each flex item an explicit width:100% * keeps the measurement identical to the block layout the theme expects. */ /* The height budget lives on , not on #website_boxed: the notification bar's 45px spacer is a sibling above the wrapper, so putting 100vh on the wrapper made every page 45px taller than the viewport and added a scrollbar to pages that needed none. */ body { display: flex; flex-direction: column; min-height: 100vh; } /* Mobile browsers report 100vh as the tallest possible viewport, which leaves a gap behind the collapsing URL bar. dvh tracks the real one. */ @supports (min-height: 100dvh) { body { min-height: 100dvh; } } /* Flex items shrink by default; the export's rows assume their natural height, so opt every child out rather than let tall content compress. */ body > *, #website_boxed > * { flex-shrink: 0; } /* Absorb whatever the notification-bar spacer leaves. */ body > #website_boxed { flex: 1 0 auto; display: flex; flex-direction: column; } /* Flex items establish a new block formatting context, which means a box that used to collapse around floated children suddenly contains them. The theme depends on that collapse: the navbar's contents are floated, the container computes to height:0 at every width, and the space for the header is reserved by its 111px bottom margin instead. As a flex item it started containing those floats and grew to ~101px, pushing every page down by that much and opening a gap under the header. Put the height back to what the block layout computed. */ #website_boxed > #hgr_top_navbar_container { height: 0; } /* The footer hangs off the wrapper on most pages and off on /cloud-communications/. Both need the width that keeps WPBakery's full-width measurement honest. A mega-footer rendered *inside* page content matches neither selector and is left untouched. */ #website_boxed > .hgr_megafooter, body > .hgr_megafooter { margin-top: auto; width: 100%; } /* * The "LOOKING FOR A MANAGED IT SERVICE?" band is the last row of the page * content rather than part of the footer markup, but it reads as one unit * with it. Left alone, the free space above the footer opened up between * the two and set the band adrift mid-page. Collect the space above the * band instead, so band and footer travel to the bottom together. * * The band sits two levels deep on most pages (.slideContent > .container > * .col-md-12) and directly under .col-md-12 on others, so each level is * matched by :has() rather than by a fixed chain. Browsers without :has() * fall back to the footer-only rule above. */ #website_boxed > .row:has(.vc_row.bottom), #website_boxed > .row .col-md-12:has(.vc_row.bottom), #website_boxed > .row .container:has(.vc_row.bottom), #website_boxed > .row .slideContent:has(.vc_row.bottom) { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; } .vc_row.bottom { margin-top: auto; }