.elementor-8811 .elementor-element.elementor-element-1f99d7d{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8811 .elementor-element.elementor-element-920dd94{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8811 .elementor-element.elementor-element-68ed085{padding:0px 0px 20px 0px;}.elementor-8811 .elementor-element.elementor-element-a560538{color:var( --e-global-color-8014d52 );}.elementor-8811 .elementor-element.elementor-element-0a756e0{width:var( --container-widget-width, 100% );max-width:100%;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-a3f76c6{width:var( --container-widget-width, 58% );max-width:58%;padding:20px 0px 0px 0px;--container-widget-width:58%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-a3f76c6:hover{--e-transform-scale:1.1;}.elementor-8811 .elementor-element.elementor-element-a3f76c6 .elementor-button{border-style:solid;border-color:#FFFFFF;padding:15px 15px 15px 15px;}.elementor-8811 .elementor-element.elementor-element-a3772c3{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8811 .elementor-element.elementor-element-3448a2f{padding:0px 0px 20px 0px;}.elementor-8811 .elementor-element.elementor-element-7058fb8{color:var( --e-global-color-8014d52 );}.elementor-8811 .elementor-element.elementor-element-e2c2087{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-ac39bc2{width:var( --container-widget-width, 58% );max-width:58%;padding:20px 0px 0px 0px;--container-widget-width:58%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-ac39bc2:hover{--e-transform-scale:1.1;}.elementor-8811 .elementor-element.elementor-element-ac39bc2 .elementor-button{border-style:solid;border-color:#FFFFFF;padding:15px 15px 15px 15px;}.elementor-8811 .elementor-element.elementor-element-14bc9f1{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8811 .elementor-element.elementor-element-74d658e{padding:0px 0px 20px 0px;}.elementor-8811 .elementor-element.elementor-element-e1266ee{color:var( --e-global-color-8014d52 );}.elementor-8811 .elementor-element.elementor-element-ff0e15f{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-aa0e650{width:var( --container-widget-width, 58% );max-width:58%;padding:20px 0px 0px 0px;--container-widget-width:58%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-aa0e650:hover{--e-transform-scale:1.1;}.elementor-8811 .elementor-element.elementor-element-aa0e650 .elementor-button{border-style:solid;border-color:#FFFFFF;padding:15px 15px 15px 15px;}.elementor-8811 .elementor-element.elementor-element-a2640d0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8811 .elementor-element.elementor-element-7ae1d27{padding:0px 0px 20px 0px;}.elementor-8811 .elementor-element.elementor-element-614d4c9{color:var( --e-global-color-8014d52 );}.elementor-8811 .elementor-element.elementor-element-29c5239{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-926d3b8{width:var( --container-widget-width, 58% );max-width:58%;padding:20px 0px 0px 0px;--container-widget-width:58%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-926d3b8:hover{--e-transform-scale:1.1;}.elementor-8811 .elementor-element.elementor-element-926d3b8 .elementor-button{border-style:solid;border-color:#FFFFFF;padding:15px 15px 15px 15px;}.elementor-8811 .elementor-element.elementor-element-9e156bb{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8811 .elementor-element.elementor-element-c419039{padding:0px 0px 20px 0px;}.elementor-8811 .elementor-element.elementor-element-09c24d0{color:var( --e-global-color-8014d52 );}.elementor-8811 .elementor-element.elementor-element-0ca0df1{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-8039486{width:var( --container-widget-width, 58% );max-width:58%;padding:20px 0px 0px 0px;--container-widget-width:58%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-8039486:hover{--e-transform-scale:1.1;}.elementor-8811 .elementor-element.elementor-element-8039486 .elementor-button{border-style:solid;border-color:#FFFFFF;padding:15px 15px 15px 15px;}.elementor-8811 .elementor-element.elementor-element-e52f4c2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8811 .elementor-element.elementor-element-79118b8{padding:0px 0px 20px 0px;}.elementor-8811 .elementor-element.elementor-element-a319d57{color:var( --e-global-color-8014d52 );}.elementor-8811 .elementor-element.elementor-element-e0d3890{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-8063b5c{width:var( --container-widget-width, 58% );max-width:58%;padding:20px 0px 0px 0px;--container-widget-width:58%;--container-widget-flex-grow:0;}.elementor-8811 .elementor-element.elementor-element-8063b5c:hover{--e-transform-scale:1.1;}.elementor-8811 .elementor-element.elementor-element-8063b5c .elementor-button{border-style:solid;border-color:#FFFFFF;padding:15px 15px 15px 15px;}@media(max-width:1024px){.elementor-8811 .elementor-element.elementor-element-1f99d7d{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-8811 .elementor-element.elementor-element-1f99d7d{--padding-top:0px;--padding-bottom:0px;--padding-left:16px;--padding-right:16px;}.elementor-8811 .elementor-element.elementor-element-920dd94{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8811 .elementor-element.elementor-element-0a756e0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-8811 .elementor-element.elementor-element-a3f76c6{padding:25px 0px 0px 0px;}.elementor-8811 .elementor-element.elementor-element-a3772c3{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8811 .elementor-element.elementor-element-e2c2087{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-8811 .elementor-element.elementor-element-ac39bc2{padding:25px 0px 0px 0px;}.elementor-8811 .elementor-element.elementor-element-14bc9f1{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8811 .elementor-element.elementor-element-ff0e15f{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-8811 .elementor-element.elementor-element-aa0e650{padding:25px 0px 0px 0px;}.elementor-8811 .elementor-element.elementor-element-a2640d0{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8811 .elementor-element.elementor-element-29c5239{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-8811 .elementor-element.elementor-element-926d3b8{padding:25px 0px 0px 0px;}.elementor-8811 .elementor-element.elementor-element-9e156bb{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8811 .elementor-element.elementor-element-0ca0df1{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-8811 .elementor-element.elementor-element-8039486{padding:25px 0px 0px 0px;}.elementor-8811 .elementor-element.elementor-element-e52f4c2{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8811 .elementor-element.elementor-element-e0d3890{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-8811 .elementor-element.elementor-element-8063b5c{padding:25px 0px 0px 0px;}}/* Start custom CSS for container, class: .elementor-element-1f99d7d *//* ========================================================= 6 PANEL FULL SECTION HOVER EFFECT (3 COLUMNS x 2 ROWS) - FBK STYLE Section class: fbk-services-grid Content boxed to the site width, photos full screen. ========================================================= LAYER STACK (all inside .fbk-services-grid): 1 image layers .service-N::after 2 active image layer (hovered one lifts above the outgoing) 3 dark overlay .service-N::before 4 widgets .service-N > * 5 content wrapper .e-con-inner ========================================================= */ .fbk-services-grid { position: relative; display: grid; grid-template-columns: minmax(20px, 1fr) repeat(3, minmax(0, calc(var(--fbk-box-width) / 3))) minmax(20px, 1fr); grid-template-rows: repeat(2, 1fr); width: 100%; min-height: 900px; overflow: hidden !important; gap: 0; isolation: isolate; /* keeps this layer stack self-contained */ background-color: #FFFFFF; /* visible only while images decode */ /* BOXED CONTENT, FULL-WIDTH IMAGES The three columns sit in the middle of the grid, exactly as wide as the site's content box, so the text lines up with the rest of the site. The two outer grid tracks are empty side margins. The photos are as wide as the screen and centred on the box, so they run edge to edge. Set --fbk-box-width to Elementor > Site Settings > Layout > Content Width. */ --fbk-box-width: 1330px; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; /* No background-image here. All six images live on the ::after layers below, so nothing snaps while the layers crossfade. */ } /* ========================================================= COLUMNS ========================================================= z-index MUST stay `auto`. A numeric z-index makes each column its own stacking context, which traps its image layer inside that column and locks paint order to DOM order. ========================================================= */ .fbk-services-grid > .service-1, .fbk-services-grid > .service-2, .fbk-services-grid > .service-3, .fbk-services-grid > .service-4, .fbk-services-grid > .service-5, .fbk-services-grid > .service-6 { position: relative; /* containing block for ::before / ::after */ z-index: auto; flex: 1 1 33.333%; min-width: 0; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; overflow: visible; background: transparent; border: none !important; } /* Columns sit in the three middle tracks of the boxed grid */ .fbk-services-grid > .service-1 { grid-column: 2; grid-row: 1; } .fbk-services-grid > .service-2 { grid-column: 3; grid-row: 1; } .fbk-services-grid > .service-3 { grid-column: 4; grid-row: 1; } .fbk-services-grid > .service-4 { grid-column: 2; grid-row: 2; } .fbk-services-grid > .service-5 { grid-column: 3; grid-row: 2; } .fbk-services-grid > .service-6 { grid-column: 4; grid-row: 2; } .fbk-services-grid > .service-1, .fbk-services-grid > .service-2, .fbk-services-grid > .service-3, .fbk-services-grid > .service-4, .fbk-services-grid > .service-5, .fbk-services-grid > .service-6 { width: 100% !important; /* fill the whole grid cell, whatever */ max-width: none !important; /* width is set on it in Elementor */ min-width: 0 !important; margin: 0 !important; justify-self: stretch !important; align-self: stretch !important; } /* ========================================================= BACKGROUND IMAGE CROSSFADE LAYERS ========================================================= Each layer is 3 columns wide and 2 rows tall, pulled left by its column index and up by its row index, so all six land on the identical rect and `cover` frames them identically. This relies on 3 equal columns, 2 equal rows and no gap. ========================================================= */ .fbk-services-grid > .service-1::after, .fbk-services-grid > .service-2::after, .fbk-services-grid > .service-3::after, .fbk-services-grid > .service-4::after, .fbk-services-grid > .service-5::after, .fbk-services-grid > .service-6::after { content: ""; position: absolute; top: 0; width: 100vw; /* full width of the screen */ height: 200%; background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0; z-index: 1; pointer-events: none; transition: opacity 0.9s ease, transform 0.9s ease; } /* Section 1 image - the permanent base. Never fades out, so every transition always has something solid underneath it. */ .fbk-services-grid > .service-1::after { left: calc((300% - 100vw) / 2); opacity: 1; background-image: url(https://fbk-sa.co.za/wp-content/uploads/2026/10/blue-handbrush-in-action-.webp); } /* Section 2 image */ .fbk-services-grid > .service-2::after { left: calc((100% - 100vw) / 2); background-image: url(https://fbk-sa.co.za/wp-content/uploads/2026/10/Green-Brush.png); } /* Section 3 image */ .fbk-services-grid > .service-3::after { left: calc((-100% - 100vw) / 2); background-image: url(https://fbk-sa.co.za/wp-content/uploads/2026/10/Orange-Sqeegee.webp); } /* Section 4 image (row 2, column 1) - replace URL */ .fbk-services-grid > .service-4::after { left: calc((300% - 100vw) / 2); top: -100%; background-image: url(https://fbk-sa.co.za/wp-content/uploads/2026/10/Red-tube-Brush.webp); } /* Section 5 image (row 2, column 2) - replace URL */ .fbk-services-grid > .service-5::after { left: calc((100% - 100vw) / 2); top: -100%; background-image: url(https://fbk-sa.co.za/wp-content/uploads/2026/10/Waterfed.png); } /* Section 6 image (row 2, column 3) - replace URL */ .fbk-services-grid > .service-6::after { left: calc((-100% - 100vw) / 2); top: -100%; background-image: url(https://fbk-sa.co.za/wp-content/uploads/2026/10/orginisation.jpeg); } /* ========================================================= IMAGE HOVER STATES ========================================================= The incoming layer lifts to z-index 2 so it covers the outgoing one. No "hide the others" rules are needed - the other layers just revert to 0. scale(1.05) is the slow zoom on the active image. All layers share the same rect, so they scale about the same point and stay aligned. Delete the transform lines to remove it. ========================================================= */ .fbk-services-grid:has(.service-1:hover) > .service-1::after { transform: scale(1.05); } .fbk-services-grid:has(.service-2:hover) > .service-2::after, .fbk-services-grid:has(.service-3:hover) > .service-3::after, .fbk-services-grid:has(.service-4:hover) > .service-4::after, .fbk-services-grid:has(.service-5:hover) > .service-5::after, .fbk-services-grid:has(.service-6:hover) > .service-6::after { opacity: 1; z-index: 2; transform: scale(1.05); transition: opacity 1.2s ease, transform 1.2s ease; } /* ========================================================= COLUMN OVERLAYS ========================================================= */ .fbk-services-grid > .service-1::before, .fbk-services-grid > .service-2::before, .fbk-services-grid > .service-3::before, .fbk-services-grid > .service-4::before, .fbk-services-grid > .service-5::before, .fbk-services-grid > .service-6::before { content: ""; position: absolute; inset: 0; background: rgba(20, 25, 35, 0); z-index: 3; /* above every image layer */ pointer-events: none; transition: background 1.2s ease; } /* Elementor uses every container's ::before for its own "Background Overlay" and gives it a fixed width/height. The size is released here and set only by the edges below. */ .fbk-services-grid > .service-1::before, .fbk-services-grid > .service-2::before, .fbk-services-grid > .service-3::before, .fbk-services-grid > .service-4::before, .fbk-services-grid > .service-5::before, .fbk-services-grid > .service-6::before { width: auto !important; height: auto !important; top: 0 !important; bottom: 0 !important; } /* Outer tiles (1, 3, 4, 6): the overlay covers the whole tile and runs past the screen edge. The section cuts it off exactly at the edge. */ .fbk-services-grid > .service-1::before, .fbk-services-grid > .service-4::before { right: 0 !important; left: -100vw !important; } .fbk-services-grid > .service-3::before, .fbk-services-grid > .service-6::before { left: 0 !important; right: -100vw !important; } /* Default: Section 1 overlay (#0176E8) */ .fbk-services-grid > .service-1::before { background: #0176E8; } /* Only the hovered column is tinted - each tile has its own solid colour */ .fbk-services-grid:has(.service-1:hover) > .service-1::before { background: #0176E8; } .fbk-services-grid:has(.service-2:hover) > .service-2::before { background: #23A640; } .fbk-services-grid:has(.service-3:hover) > .service-3::before { background: #FD7F17; } .fbk-services-grid:has(.service-4:hover) > .service-4::before { background: #E92E35; } .fbk-services-grid:has(.service-5:hover) > .service-5::before { background: #000000; } .fbk-services-grid:has(.service-6:hover) > .service-6::before { background: #FD989E; } /* Non-hovered sections remain clear */ .fbk-services-grid:has(.service-1:hover) > .service-2::before, .fbk-services-grid:has(.service-1:hover) > .service-3::before, .fbk-services-grid:has(.service-2:hover) > .service-1::before, .fbk-services-grid:has(.service-2:hover) > .service-3::before, .fbk-services-grid:has(.service-3:hover) > .service-1::before, .fbk-services-grid:has(.service-3:hover) > .service-2::before, .fbk-services-grid:has(.service-4:hover) > .service-1::before, .fbk-services-grid:has(.service-5:hover) > .service-1::before, .fbk-services-grid:has(.service-6:hover) > .service-1::before { background: rgba(20, 25, 35, 0); } /* ========================================================= CONTENT ========================================================= */ .fbk-services-grid > .service-1 > *, .fbk-services-grid > .service-2 > *, .fbk-services-grid > .service-3 > *, .fbk-services-grid > .service-4 > *, .fbk-services-grid > .service-5 > *, .fbk-services-grid > .service-6 > * { position: relative; z-index: 4; /* above the overlay (3) */ opacity: 1 !important; visibility: visible !important; transition: opacity 1.2s ease; } /* ========================================================= BOTTOM ALIGNMENT ========================================================= */ .fbk-services-grid > .service-1 > .e-con-inner, .fbk-services-grid > .service-2 > .e-con-inner, .fbk-services-grid > .service-3 > .e-con-inner, .fbk-services-grid > .service-4 > .e-con-inner, .fbk-services-grid > .service-5 > .e-con-inner, .fbk-services-grid > .service-6 > .e-con-inner { position: absolute !important; left: 0 !important; right: 40px !important; bottom: 40px !important; width: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; z-index: 5 !important; } /* Keep widgets in stack */ .fbk-services-grid > .service-1 > .e-con-inner > *, .fbk-services-grid > .service-2 > .e-con-inner > *, .fbk-services-grid > .service-3 > .e-con-inner > *, .fbk-services-grid > .service-4 > .e-con-inner > *, .fbk-services-grid > .service-5 > .e-con-inner > *, .fbk-services-grid > .service-6 > .e-con-inner > * { flex-shrink: 0; } /* Direct widgets */ .fbk-services-grid > .service-1 > .elementor-widget, .fbk-services-grid > .service-2 > .elementor-widget, .fbk-services-grid > .service-3 > .elementor-widget, .fbk-services-grid > .service-4 > .elementor-widget, .fbk-services-grid > .service-5 > .elementor-widget, .fbk-services-grid > .service-6 > .elementor-widget { flex-shrink: 0; opacity: 1 !important; visibility: visible !important; } /* Maintain bottom position on hover */ .fbk-services-grid > .service-1:hover > .e-con-inner, .fbk-services-grid > .service-2:hover > .e-con-inner, .fbk-services-grid > .service-3:hover > .e-con-inner, .fbk-services-grid > .service-4:hover > .e-con-inner, .fbk-services-grid > .service-5:hover > .e-con-inner, .fbk-services-grid > .service-6:hover > .e-con-inner { bottom: 40px !important; justify-content: flex-end !important; } /* ========================================================= DESCRIPTIONS ========================================================= The description stays in the layout at all times and animates its height via grid-template-rows: 0fr -> 1fr. Because .e-con-inner is anchored to the bottom, growing the description slides the number and heading upward. `display: none` cannot be transitioned, which is why the old version needed a keyframe animation and still popped. ========================================================= */ .fbk-services-grid .service-description { display: grid !important; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; } /* The

is the grid item that gets clipped. Its padding has to collapse too, or the closed state keeps a 15px dead gap. */ .fbk-services-grid .service-description > * { overflow: hidden; min-height: 0; margin: 0 !important; padding-top: 0; transition: padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Section 1 is the default-active column, so it opens on load */ .fbk-services-grid > .service-1 .service-description { grid-template-rows: 1fr; opacity: 1; } .fbk-services-grid > .service-1 .service-description > * { padding-top: 15px; } /* ...but it collapses as soon as another column takes over, so only one column is ever expanded. Wins on specificity (0,5,0 vs 0,3,0) because :has() inherits the weight of its most specific argument. */ .fbk-services-grid:has(.service-2:hover) > .service-1 .service-description, .fbk-services-grid:has(.service-3:hover) > .service-1 .service-description, .fbk-services-grid:has(.service-4:hover) > .service-1 .service-description, .fbk-services-grid:has(.service-5:hover) > .service-1 .service-description, .fbk-services-grid:has(.service-6:hover) > .service-1 .service-description { grid-template-rows: 0fr; opacity: 0; } .fbk-services-grid:has(.service-2:hover) > .service-1 .service-description > *, .fbk-services-grid:has(.service-3:hover) > .service-1 .service-description > *, .fbk-services-grid:has(.service-4:hover) > .service-1 .service-description > *, .fbk-services-grid:has(.service-5:hover) > .service-1 .service-description > *, .fbk-services-grid:has(.service-6:hover) > .service-1 .service-description > * { padding-top: 0; } /* Sections 2 to 6 open on their own hover */ .fbk-services-grid > .service-2:hover .service-description, .fbk-services-grid > .service-3:hover .service-description, .fbk-services-grid > .service-4:hover .service-description, .fbk-services-grid > .service-5:hover .service-description, .fbk-services-grid > .service-6:hover .service-description { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s; } .fbk-services-grid > .service-2:hover .service-description > *, .fbk-services-grid > .service-3:hover .service-description > *, .fbk-services-grid > .service-4:hover .service-description > *, .fbk-services-grid > .service-5:hover .service-description > *, .fbk-services-grid > .service-6:hover .service-description > * { padding-top: 15px; } /* Description text */ .fbk-services-grid .service-description, .fbk-services-grid .service-description p { color: #ffffff !important; } /* ========================================================= HEADINGS - light blue, as in the design ========================================================= */ .fbk-services-grid .elementor-heading-title { color: #00AEEF !important; } /* ========================================================= BUTTON BASE ========================================================= The button's own text/icon are hidden. Two labels are drawn on top instead and cross-fade: ::before ">" (resting square button) ::after "EXPLORE" (active blue button) min-width does the animating, so the square grows smoothly into the EXPLORE button. ========================================================= */ .fbk-services-grid .hover-button { display: inline-block !important; position: relative; opacity: 1 !important; visibility: visible !important; z-index: 10 !important; } .fbk-services-grid .hover-button .elementor-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; background: transparent !important; border: 1px solid #ffffff !important; border-radius: 0 !important; color: #ffffff !important; overflow: hidden; transition: min-width 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, transform 0.5s ease; } /* Hide Elementor's own text and icon - the labels below replace them */ .fbk-services-grid .hover-button .elementor-button-content-wrapper { display: none !important; } /* ">" label */ .fbk-services-grid .hover-button .elementor-button::before { content: ">"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 16px; font-weight: 700; line-height: 1; opacity: 1; transition: opacity 0.4s ease; } /* "EXPLORE" label */ .fbk-services-grid .hover-button .elementor-button::after { content: "EXPLORE"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.3px; white-space: nowrap; opacity: 0; transition: opacity 0.4s ease; } /* ========================================================= SECTION 1 - ACTIVE BY DEFAULT (blue EXPLORE button) ========================================================= */ .fbk-services-grid > .service-1 .hover-button .elementor-button { min-width: 126px !important; background: #004A9C !important; border-color: #004A9C !important; } .fbk-services-grid > .service-1 .hover-button .elementor-button::before { opacity: 0 !important; } .fbk-services-grid > .service-1 .hover-button .elementor-button::after { opacity: 1 !important; } /* Section 1 hands the active state over when another tile is hovered */ .fbk-services-grid:has(.service-2:hover) > .service-1 .hover-button .elementor-button, .fbk-services-grid:has(.service-3:hover) > .service-1 .hover-button .elementor-button, .fbk-services-grid:has(.service-4:hover) > .service-1 .hover-button .elementor-button, .fbk-services-grid:has(.service-5:hover) > .service-1 .hover-button .elementor-button, .fbk-services-grid:has(.service-6:hover) > .service-1 .hover-button .elementor-button { min-width: 44px !important; background: transparent !important; border-color: #ffffff !important; } .fbk-services-grid:has(.service-2:hover) > .service-1 .hover-button .elementor-button::before, .fbk-services-grid:has(.service-3:hover) > .service-1 .hover-button .elementor-button::before, .fbk-services-grid:has(.service-4:hover) > .service-1 .hover-button .elementor-button::before, .fbk-services-grid:has(.service-5:hover) > .service-1 .hover-button .elementor-button::before, .fbk-services-grid:has(.service-6:hover) > .service-1 .hover-button .elementor-button::before { opacity: 1 !important; } .fbk-services-grid:has(.service-2:hover) > .service-1 .hover-button .elementor-button::after, .fbk-services-grid:has(.service-3:hover) > .service-1 .hover-button .elementor-button::after, .fbk-services-grid:has(.service-4:hover) > .service-1 .hover-button .elementor-button::after, .fbk-services-grid:has(.service-5:hover) > .service-1 .hover-button .elementor-button::after, .fbk-services-grid:has(.service-6:hover) > .service-1 .hover-button .elementor-button::after { opacity: 0 !important; } /* ========================================================= HOVERED TILE - square grows into the blue EXPLORE button ========================================================= */ .fbk-services-grid .service-1:hover .hover-button .elementor-button, .fbk-services-grid .service-2:hover .hover-button .elementor-button, .fbk-services-grid .service-3:hover .hover-button .elementor-button, .fbk-services-grid .service-4:hover .hover-button .elementor-button, .fbk-services-grid .service-5:hover .hover-button .elementor-button, .fbk-services-grid .service-6:hover .hover-button .elementor-button { min-width: 126px !important; background: #004A9C !important; border-color: #004A9C !important; } .fbk-services-grid .service-1:hover .hover-button .elementor-button::before, .fbk-services-grid .service-2:hover .hover-button .elementor-button::before, .fbk-services-grid .service-3:hover .hover-button .elementor-button::before, .fbk-services-grid .service-4:hover .hover-button .elementor-button::before, .fbk-services-grid .service-5:hover .hover-button .elementor-button::before, .fbk-services-grid .service-6:hover .hover-button .elementor-button::before { opacity: 0 !important; } .fbk-services-grid .service-1:hover .hover-button .elementor-button::after, .fbk-services-grid .service-2:hover .hover-button .elementor-button::after, .fbk-services-grid .service-3:hover .hover-button .elementor-button::after, .fbk-services-grid .service-4:hover .hover-button .elementor-button::after, .fbk-services-grid .service-5:hover .hover-button .elementor-button::after, .fbk-services-grid .service-6:hover .hover-button .elementor-button::after { opacity: 1 !important; transition-delay: 0.15s; } /* Button hover */ .fbk-services-grid .hover-button .elementor-button:hover { transform: translateY(-2px); } /* ========================================================= KEEP ALL SECTION CONTENT VISIBLE ========================================================= */ .fbk-services-grid:hover > .service-1 > .e-con-inner, .fbk-services-grid:hover > .service-2 > .e-con-inner, .fbk-services-grid:hover > .service-3 > .e-con-inner, .fbk-services-grid:hover > .service-4 > .e-con-inner, .fbk-services-grid:hover > .service-5 > .e-con-inner, .fbk-services-grid:hover > .service-6 > .e-con-inner { opacity: 1 !important; visibility: visible !important; z-index: 5 !important; } .fbk-services-grid:hover > .service-1 > .e-con-inner > *, .fbk-services-grid:hover > .service-2 > .e-con-inner > *, .fbk-services-grid:hover > .service-3 > .e-con-inner > *, .fbk-services-grid:hover > .service-4 > .e-con-inner > *, .fbk-services-grid:hover > .service-5 > .e-con-inner > *, .fbk-services-grid:hover > .service-6 > .e-con-inner > * { opacity: 1 !important; visibility: visible !important; } /* ========================================================= NON-HOVERED SECTION CONTENT STAYS VISIBLE ========================================================= */ .fbk-services-grid:has(.service-1:hover) > .service-2 > .e-con-inner, .fbk-services-grid:has(.service-1:hover) > .service-3 > .e-con-inner, .fbk-services-grid:has(.service-2:hover) > .service-1 > .e-con-inner, .fbk-services-grid:has(.service-2:hover) > .service-3 > .e-con-inner, .fbk-services-grid:has(.service-3:hover) > .service-1 > .e-con-inner, .fbk-services-grid:has(.service-3:hover) > .service-2 > .e-con-inner { display: flex !important; opacity: 1 !important; visibility: visible !important; z-index: 5 !important; } /* ========================================================= TEXT INSET - tiles 2, 3, 5, 6 ========================================================= Moves the text 20px in from the left edge of these tiles so it doesn't sit against the overlay edge. Overlays are untouched. Desktop only - tablet and mobile keep their own spacing. ========================================================= */ @media (min-width: 1025px) { .fbk-services-grid > .service-2 > .e-con-inner, .fbk-services-grid > .service-3 > .e-con-inner, .fbk-services-grid > .service-5 > .e-con-inner, .fbk-services-grid > .service-6 > .e-con-inner { left: 20px !important; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .fbk-services-grid { min-height: 445px; } .fbk-services-grid > .service-1, .fbk-services-grid > .service-2, .fbk-services-grid > .service-3, .fbk-services-grid > .service-4, .fbk-services-grid > .service-5, .fbk-services-grid > .service-6 { min-height: 445px; padding: 40px; } .fbk-services-grid > .service-1 > .e-con-inner, .fbk-services-grid > .service-2 > .e-con-inner, .fbk-services-grid > .service-3 > .e-con-inner, .fbk-services-grid > .service-4 > .e-con-inner, .fbk-services-grid > .service-5 > .e-con-inner, .fbk-services-grid > .service-6 > .e-con-inner { left: 40px !important; right: 40px !important; bottom: 25px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 1024px) { .fbk-services-grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: auto; } .fbk-services-grid > .service-1, .fbk-services-grid > .service-2, .fbk-services-grid > .service-3, .fbk-services-grid > .service-4, .fbk-services-grid > .service-5, .fbk-services-grid > .service-6 { grid-column: 1; grid-row: auto; } .fbk-services-grid > .service-1::before, .fbk-services-grid > .service-2::before, .fbk-services-grid > .service-3::before, .fbk-services-grid > .service-4::before, .fbk-services-grid > .service-5::before, .fbk-services-grid > .service-6::before { left: 0 !important; right: 0 !important; } .fbk-services-grid > .service-1, .fbk-services-grid > .service-2, .fbk-services-grid > .service-3, .fbk-services-grid > .service-4, .fbk-services-grid > .service-5, .fbk-services-grid > .service-6 { width: 100%; min-height: 322px; padding: 30px; border: none !important; } /* Stacked: each tile shows its OWN image at its own size */ .fbk-services-grid > .service-1::after, .fbk-services-grid > .service-2::after, .fbk-services-grid > .service-3::after, .fbk-services-grid > .service-4::after, .fbk-services-grid > .service-5::after, .fbk-services-grid > .service-6::after { width: 100% !important; height: 100% !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; opacity: 1 !important; z-index: 1 !important; transform: none !important; transition: none !important; } /* Every tile keeps its own tint - no hover on touch */ .fbk-services-grid > .service-1::before, .fbk-services-grid > .service-2::before, .fbk-services-grid > .service-3::before, .fbk-services-grid > .service-4::before, .fbk-services-grid > .service-5::before, .fbk-services-grid > .service-6::before { background: rgba(20, 25, 35, 0.45) !important; transition: none !important; } .fbk-services-grid > .service-1 > .e-con-inner, .fbk-services-grid > .service-2 > .e-con-inner, .fbk-services-grid > .service-3 > .e-con-inner, .fbk-services-grid > .service-4 > .e-con-inner, .fbk-services-grid > .service-5 > .e-con-inner, .fbk-services-grid > .service-6 > .e-con-inner { left: 30px !important; right: 30px !important; bottom: 30px !important; } /* All descriptions open */ .fbk-services-grid .service-description { grid-template-rows: 1fr !important; opacity: 1 !important; transition: none !important; } .fbk-services-grid .service-description > * { padding-top: 15px !important; transition: none !important; } /* Every tile shows the blue EXPLORE button - no hover on touch */ .fbk-services-grid .hover-button .elementor-button, .fbk-services-grid > .service-1 .hover-button .elementor-button { min-width: 126px !important; background: #004A9C !important; border-color: #004A9C !important; } .fbk-services-grid .hover-button .elementor-button::before { opacity: 0 !important; } .fbk-services-grid .hover-button .elementor-button::after { opacity: 1 !important; } /* Space between stacked tiles */ .fbk-services-grid > .service-1, .fbk-services-grid > .service-2, .fbk-services-grid > .service-3, .fbk-services-grid > .service-4, .fbk-services-grid > .service-5 { margin-bottom: 35px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .fbk-services-grid *, .fbk-services-grid *::before, .fbk-services-grid *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }/* End custom CSS */