.elementor-1910 .elementor-element.elementor-element-4fc7498{--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;--align-items:center;--gap:32px 0px;--row-gap:32px;--column-gap:0px;--overlay-opacity:0.92;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:200px;--padding-bottom:45px;--padding-left:40px;--padding-right:40px;}.elementor-1910 .elementor-element.elementor-element-4fc7498:not(.elementor-motion-effects-element-type-background), .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor2 );background-image:url("https://hein.ca/wp-content/uploads/2026/05/Safety-Web-Banner.png");background-position:0px -58px;background-repeat:no-repeat;background-size:cover;}.elementor-1910 .elementor-element.elementor-element-4fc7498::before, .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-background-video-container::before, .elementor-1910 .elementor-element.elementor-element-4fc7498 > .e-con-inner > .elementor-background-video-container::before, .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-background-slideshow::before, .elementor-1910 .elementor-element.elementor-element-4fc7498 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-astglobalcolor2 );--background-overlay:'';}.elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-shape-bottom svg, .elementor-1910 .elementor-element.elementor-element-4fc7498 > .e-con-inner > .elementor-shape-bottom svg{width:calc(0 + 1.3px);height:4em;}.elementor-1910 .elementor-element.elementor-element-1c4da1e{--display:flex;--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-1910 .elementor-element.elementor-element-19c6189 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-19c6189{text-align:center;font-family:"Michroma", Sans-serif;font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:1.9px;word-spacing:7px;color:#FFFFFF;}.elementor-1910 .elementor-element.elementor-element-19c6189 p{margin-block-end:0px;}.elementor-1910 .elementor-element.elementor-element-402536d{--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-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-1e9e947{--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:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--overflow:hidden;}.elementor-1910 .elementor-element.elementor-element-83c31ef{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:64px 64px;--row-gap:64px;--column-gap:64px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-094e8d1{--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:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1910 .elementor-element.elementor-element-1d3910b{--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:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--overflow:hidden;}.elementor-1910 .elementor-element.elementor-element-7e6be8e{--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:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-7e6be8e:not(.elementor-motion-effects-element-type-background), .elementor-1910 .elementor-element.elementor-element-7e6be8e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://hein.ca/wp-content/uploads/2026/06/construction-safety-02-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1910 .elementor-element.elementor-element-79fa8f2{--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-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1910 .elementor-element.elementor-element-c185bc3{--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-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1910 .elementor-element.elementor-element-d909445 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-e6cec13 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-21f63b2{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--flex-wrap:wrap;}.elementor-1910 .elementor-element.elementor-element-7793ed8{--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-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-b763d64 > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-1910 .elementor-element.elementor-element-b763d64 .elementor-icon-wrapper{text-align:center;}.elementor-1910 .elementor-element.elementor-element-12aaa82 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-97391ec{--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-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-4ccd359 > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-1910 .elementor-element.elementor-element-4ccd359 .elementor-icon-wrapper{text-align:center;}.elementor-1910 .elementor-element.elementor-element-bbae13f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-4ff123d{--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-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-54236bc > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-1910 .elementor-element.elementor-element-54236bc .elementor-icon-wrapper{text-align:center;}.elementor-1910 .elementor-element.elementor-element-04cc269 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-59a2068{--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-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-5c16aee > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-1910 .elementor-element.elementor-element-5c16aee .elementor-icon-wrapper{text-align:center;}.elementor-1910 .elementor-element.elementor-element-ff54f54 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-5a0fbc9{--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-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-fcca26f > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-1910 .elementor-element.elementor-element-fcca26f .elementor-icon-wrapper{text-align:center;}.elementor-1910 .elementor-element.elementor-element-dd5fff6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-8bd3aa2{--display:flex;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-dce953f{--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:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-9e37c5e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-23a30dd{--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:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1910 .elementor-element.elementor-element-8c9b8de > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-0f8e95f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-2fa2686{--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:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-79fc3ca{--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:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-c4229b3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--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-1910 .elementor-element.elementor-element-78bf290{--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:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1910 .elementor-element.elementor-element-20c3a2c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1910 .elementor-element.elementor-element-3093e26{--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:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}:root{--page-title-display:none;}@media(min-width:1025px){.elementor-1910 .elementor-element.elementor-element-7e6be8e:not(.elementor-motion-effects-element-type-background), .elementor-1910 .elementor-element.elementor-element-7e6be8e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}@media(max-width:1024px){.elementor-1910 .elementor-element.elementor-element-4fc7498:not(.elementor-motion-effects-element-type-background), .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-1910 .elementor-element.elementor-element-4fc7498{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:110px;--padding-bottom:110px;--padding-left:32px;--padding-right:32px;}}@media(max-width:767px){.elementor-1910 .elementor-element.elementor-element-4fc7498:not(.elementor-motion-effects-element-type-background), .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-1910 .elementor-element.elementor-element-4fc7498{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:24px;--padding-right:24px;}}/* Start custom CSS for text-editor, class: .elementor-element-19c6189 *//* Makes the liquid glass background hug the project title instead of stretching wide */ .elementor-1910 .elementor-element.elementor-element-19c6189 { width: fit-content !important; max-width: 90%; margin-left: auto; margin-right: auto; align-self: center; } /* Makes the glass effect area size to the text */ .elementor-1910 .elementor-element.elementor-element-19c6189 > .elementor-widget-container { width: fit-content !important; max-width: 100%; display: inline-flex !important; align-items: center; justify-content: center; padding: 8px 24px !important; } /* Removes extra paragraph spacing from the Text Editor widget */ .elementor-1910 .elementor-element.elementor-element-19c6189 p { margin: 0; } /* Keeps the title on one line on desktop */ .elementor-1910 .elementor-element.elementor-element-19c6189 .elementor-widget-container, .elementor-1910 .elementor-element.elementor-element-19c6189 .elementor-text-editor, .elementor-1910 .elementor-element.elementor-element-19c6189 p { white-space: nowrap; } /* Allows the title to wrap nicely on mobile */ @media (max-width: 767px) { .elementor-1910 .elementor-element.elementor-element-19c6189 { max-width: 92%; } .elementor-1910 .elementor-element.elementor-element-19c6189 .elementor-widget-container, .elementor-1910 .elementor-element.elementor-element-19c6189 .elementor-text-editor, .elementor-1910 .elementor-element.elementor-element-19c6189 p { white-space: normal; text-align: center; } } /* Project hero title shadow, matching the project card treatment */ .elementor-1910 .elementor-element.elementor-element-19c6189 p { margin: 0; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4fc7498 *//* ========================================================= HEIN INNER-PAGE HERO GRADIENT RESPONSIVE SHAPE-DIVIDER VERSION Apply directly to the outermost hero container. No CSS class or fixed height is required. Shape-divider depth is explicitly controlled so the curve remains consistent across desktop, tablet and mobile. ========================================================= */ .elementor-1910 .elementor-element.elementor-element-4fc7498 { --hein-hero-curve-height: 58px; position: relative; isolation: isolate; overflow: hidden; } /* Disable Elementor's existing overlay */ .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-background-overlay { display: none !important; } /* ========================================================= HEIN BLUE GRADIENT ========================================================= */ .elementor-1910 .elementor-element.elementor-element-4fc7498::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(0, 23, 42, 0.94) 0%, rgba(0, 48, 87, 0.86) 45%, rgba(51, 91, 141, 0.68) 100% ), linear-gradient( 180deg, rgba(0, 31, 56, 0.08) 0%, rgba(0, 31, 56, 0.26) 100% ); } /* ========================================================= HERO CONTENT ========================================================= */ .elementor-1910 .elementor-element.elementor-element-4fc7498 > .e-con-inner { position: relative; z-index: 2; } .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-element:not(.elementor-shape):not(.elementor-background-overlay) { position: relative; z-index: 2; } /* ========================================================= SHAPE DIVIDER Elementor retains the selected divider shape. CSS controls its rendered depth so the curve does not become excessively tall or dramatic on smaller screens. ========================================================= */ .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-shape { position: absolute !important; left: 0 !important; z-index: 4 !important; display: block !important; width: 100% !important; height: var(--hein-hero-curve-height) !important; overflow: hidden !important; pointer-events: none; line-height: 0; } .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-shape-top { top: -1px !important; bottom: auto !important; } .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-shape-bottom { top: auto !important; bottom: -1px !important; } .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-shape svg { position: relative; display: block; width: calc(100% + 1.3px) !important; min-width: calc(100% + 1.3px) !important; height: 100% !important; } /* Correct divider fill to match section below */ .elementor-1910 .elementor-element.elementor-element-4fc7498 > .elementor-shape .elementor-shape-fill { fill: #ffffff !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-1910 .elementor-element.elementor-element-4fc7498 { --hein-hero-curve-height: 44px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-1910 .elementor-element.elementor-element-4fc7498 { --hein-hero-curve-height: 30px; } .elementor-1910 .elementor-element.elementor-element-4fc7498::before { background: linear-gradient( 90deg, rgba(0, 23, 42, 0.92) 0%, rgba(0, 48, 87, 0.86) 57%, rgba(43, 84, 132, 0.74) 100% ), linear-gradient( 180deg, rgba(0, 31, 56, 0.08) 0%, rgba(0, 31, 56, 0.28) 100% ); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-1910 .elementor-element.elementor-element-4fc7498 { --hein-hero-curve-height: 28px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1e9e947 *//* ========================================================================== HEIN HEALTH & SAFETY 01 - SAFETY INTRO -------------------------------------------------------------------------- SINGLE IMAGE VERSION APPLY THIS CSS TO: 01 - SAFETY INTRO REQUIRED CLASSES: hein-safety-intro hein-safety-intro__inner hein-safety-intro__copy hein-safety-intro__eyebrow hein-kicker hein-safety-intro__title hein-safety-intro__text hein-safety-intro__media hein-safety-intro__photo hein-safety-intro__photo--main IMPORTANT: Add BOTH of these classes to the eyebrow Heading widget: hein-safety-intro__eyebrow hein-kicker MAIN IMAGE SETTINGS IN ELEMENTOR: Image Resolution / Image Size: FULL The remaining image is centred within the media column and capped at 580px on desktop. ========================================================================== */ /* ========================================================================== 1. SECTION ROOT ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 { --hein-blue: #003057; --hein-blue-dark: #001f38; --hein-orange: #f58220; --hein-white: #ffffff; --hein-body: #41596a; position: relative; isolation: isolate; width: 100%; margin: 0 !important; padding: 80px 30px !important; overflow: hidden; color: var(--hein-body); background: var(--hein-white); } /* Predictable sizing */ .elementor-1910 .elementor-element.elementor-element-1e9e947, .elementor-1910 .elementor-element.elementor-element-1e9e947 *, .elementor-1910 .elementor-element.elementor-element-1e9e947 *::before, .elementor-1910 .elementor-element.elementor-element-1e9e947 *::after { box-sizing: border-box; } /* Remove Elementor automatic widget spacing */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .elementor-widget { margin-block-end: 0 !important; } /* ========================================================================== 1A. HEIN BLUEPRINT GRID ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient( rgba(0, 48, 87, 0.06) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0, 48, 87, 0.06) 1px, transparent 1px ); background-size: 48px 48px; background-position: center top; opacity: 0.46; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.25) 7%, rgba(0, 0, 0, 0.75) 14%, #000000 22%, #000000 78%, rgba(0, 0, 0, 0.75) 86%, rgba(0, 0, 0, 0.25) 93%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.25) 7%, rgba(0, 0, 0, 0.75) 14%, #000000 22%, #000000 78%, rgba(0, 0, 0, 0.75) 86%, rgba(0, 0, 0, 0.25) 93%, transparent 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* ========================================================================== 1B. SUBTLE AMBIENT GRADIENT SWEEP ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 65deg, transparent 18%, rgba(0, 48, 87, 0.018) 34%, rgba(245, 130, 32, 0.035) 48%, rgba(0, 48, 87, 0.018) 60%, transparent 76% ); background-size: 220% 100%; background-position: -100% 50%; opacity: 1; animation: hein-safety-intro-sweep 20s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000000 18%, #000000 82%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000000 18%, #000000 82%, transparent 100% ); } @keyframes hein-safety-intro-sweep { from { background-position: -100% 50%; } to { background-position: 100% 50%; } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .elementor-1910 .elementor-element.elementor-element-1e9e947::after { animation: none; } } /* ========================================================================== 2. 1200PX CONTENT SHELL ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__inner { position: relative; z-index: 2; display: grid !important; width: 100% !important; max-width: 1200px !important; min-width: 0; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); column-gap: 72px; row-gap: 44px; align-items: center; margin: 0 auto !important; padding: 0 !important; } /* * Elementor may insert an .e-con-inner wrapper. * Remove it from the grid equation. */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__inner > .e-con-inner { display: contents !important; } /* ========================================================================== 3. COPY COLUMN ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__copy { position: relative; z-index: 2; display: flex !important; width: 100% !important; min-width: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== 4. EYEBROW / GLOBAL KICKER ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow { display: block; width: auto !important; margin: 0 0 15px !important; padding: 0 !important; } /* Remove inherited decorative lines */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow::before, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow::after, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow > .elementor-widget-container::before, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow > .elementor-widget-container::after { content: none !important; display: none !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow .elementor-heading-title { display: inline-flex !important; width: auto !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; color: var(--hein-orange) !important; font-family: "Open Sans", Arial, sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; white-space: nowrap; } /* Standard orange construction datum */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow .elementor-heading-title::before { content: ""; display: block; width: 26px; height: 2px; flex: 0 0 26px; background: var(--hein-orange); } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow .elementor-heading-title::after { content: none !important; display: none !important; } /* ========================================================================== 5. MAJOR SECTION HEADING ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__title { width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__title .elementor-heading-title { width: 100%; max-width: 520px; margin: 0 !important; padding: 0 !important; color: var(--hein-blue) !important; font-family: "Aller", "Open Sans", Arial, sans-serif !important; font-size: clamp(35px, 3.5vw, 50px) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.032em !important; text-transform: uppercase !important; text-align: left !important; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; } /* ========================================================================== 6. INTRO COPY ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text { width: 100% !important; max-width: 535px; margin: 0 !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text p { color: var(--hein-body) !important; font-family: "Open Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.68 !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text p { margin: 0 0 16px !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text p:last-child { margin-bottom: 0 !important; } /* ========================================================================== 7. SINGLE SAFETY IMAGE -------------------------------------------------------------------------- Structure: Intro Media .hein-safety-intro__media Main Image .hein-safety-intro__photo .hein-safety-intro__photo--main Desktop: - centred within the right grid column - capped at 580px - natural image aspect ratio - no forced crop ========================================================================== */ /* ========================================================================== 7A. MEDIA FRAME ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media { position: relative; z-index: 2; display: block !important; width: 100% !important; max-width: 580px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; /* * Explicitly center the entire image frame inside * the right-hand grid column. */ justify-self: center !important; align-self: center !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; background: var(--hein-blue-dark); border-radius: 18px; box-shadow: 0 16px 38px rgba(0, 31, 56, 0.14); } /* ========================================================================== 7B. ELEMENTOR MEDIA WRAPPER ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media > .e-con-inner { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* * Kill any width retained from the previous collage. */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media > .elementor-element, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media > .e-con-inner > .elementor-element { --container-widget-width: 100% !important; --container-widget-flex-grow: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 100% !important; align-self: stretch !important; } /* ========================================================================== 7C. MAIN IMAGE WIDGET ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main { --container-widget-width: 100% !important; --container-widget-flex-grow: 1 !important; position: relative; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 100% !important; align-self: stretch !important; overflow: hidden !important; background: var(--hein-blue-dark); line-height: 0; } /* ========================================================================== 7D. IMAGE WIDGET CONTAINER ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo > .elementor-widget-container, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main > .elementor-widget-container { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; line-height: 0; } /* Linked image */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo .elementor-widget-container > a, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main .elementor-widget-container > a { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* ========================================================================== 7E. ELEMENTOR IMAGE / PICTURE WRAPPERS ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo .elementor-image, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main .elementor-image, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo picture, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main picture { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* ========================================================================== 7F. ACTUAL IMAGE -------------------------------------------------------------------------- Important: Do NOT force a fixed height. Do NOT scale beyond the media container. Do NOT transform the image. This helps prevent unnecessary softening. ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo img, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main img, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo .elementor-widget-container img, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main .elementor-widget-container img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; transform: none !important; transform-origin: center center !important; transition: none !important; image-rendering: auto; border: 0; border-radius: 0 !important; } /* ========================================================================== 7G. SUBTLE PHOTO TREATMENT ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo::after, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( to top, rgba(0, 31, 56, 0.09) 0%, rgba(0, 31, 56, 0.018) 40%, rgba(0, 31, 56, 0) 68% ); box-shadow: inset 0 -35px 60px rgba(0, 31, 56, 0.045); } /* ========================================================================== 7H. OUTER IMAGE BORDER ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border: 1px solid rgba(0, 48, 87, 0.10); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } /* ========================================================================== 8. TABLET / SMALL DESKTOP ========================================================================== */ @media (max-width: 1024px) { .elementor-1910 .elementor-element.elementor-element-1e9e947 { padding: 70px 28px !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: 44px; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__title .elementor-heading-title { max-width: 470px; font-size: clamp(34px, 4vw, 45px) !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media { width: 100% !important; max-width: 520px !important; justify-self: center !important; margin: 0 auto !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo img, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main img { width: 100% !important; height: auto !important; } } /* ========================================================================== 9. STACKED TABLET ========================================================================== */ @media (max-width: 820px) { .elementor-1910 .elementor-element.elementor-element-1e9e947 { padding: 64px 24px !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__inner { grid-template-columns: 1fr; row-gap: 40px; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__copy { width: 100% !important; max-width: 680px; margin: 0 auto !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__title .elementor-heading-title { max-width: 620px; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text { max-width: 650px; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media { width: 100% !important; max-width: 680px !important; justify-self: center !important; margin: 0 auto !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo img, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main img { width: 100% !important; height: auto !important; object-fit: contain !important; } } /* ========================================================================== 10. MOBILE ========================================================================== */ @media (max-width: 767px) { .elementor-1910 .elementor-element.elementor-element-1e9e947 { padding: 56px 20px 60px !important; } /* Blueprint */ .elementor-1910 .elementor-element.elementor-element-1e9e947::before { background-size: 40px 40px; opacity: 0.42; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 10%, #000000 20%, #000000 80%, rgba(0, 0, 0, 0.55) 90%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 10%, #000000 20%, #000000 80%, rgba(0, 0, 0, 0.55) 90%, transparent 100% ); } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__inner { row-gap: 32px; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__eyebrow { margin-bottom: 13px !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__title { margin-bottom: 17px !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__title .elementor-heading-title { max-width: none; font-size: clamp(33px, 8.8vw, 42px) !important; line-height: 1.08 !important; text-wrap: pretty; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__text p { font-size: 16px !important; line-height: 1.65 !important; } /* Single responsive image */ .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media { display: block !important; width: 100% !important; max-width: 620px !important; height: auto !important; min-height: 0 !important; justify-self: center !important; margin: 0 auto !important; border-radius: 15px; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media > .e-con-inner { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; flex: 0 0 100% !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo > .elementor-widget-container, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main > .elementor-widget-container { width: 100% !important; max-width: 100% !important; height: auto !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo img, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center center !important; transform: none !important; } } /* ========================================================================== 11. SMALL MOBILE ========================================================================== */ @media (max-width: 420px) { .elementor-1910 .elementor-element.elementor-element-1e9e947 { padding: 52px 18px 56px !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__title .elementor-heading-title { font-size: clamp(31px, 9vw, 39px) !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__media { width: 100% !important; max-width: 100% !important; height: auto !important; justify-self: center !important; margin: 0 auto !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; } .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo img, .elementor-1910 .elementor-element.elementor-element-1e9e947 .hein-safety-intro__photo--main img { width: 100% !important; max-width: 100% !important; height: auto !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7e6be8e *//* ========================================================================== HEIN HEALTH & SAFETY 02 - SAFETY APPROACH -------------------------------------------------------------------------- APPLY TO: 02 - SAFETY APPROACH KICKER CLASSES: hein-safety-approach__eyebrow hein-kicker UPDATED: - Cinematic "Netflix-style" moving background - 35-second slow photographic drift - Oversized background layer prevents exposed edges - Dark HEIN blue photographic treatment retained - Technical grid retained - Compact 3 + 2 card layout - Larger principle icons - No hover behaviour - No orange connector / mortar lines - Retains subtle orange accent cap on each card ========================================================================== */ /* ========================================================================== 1. SECTION ROOT ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e { --hein-blue: #003057; --hein-blue-dark: #001f38; --hein-blue-deep: #00172a; --hein-orange: #f58220; --hein-white: #ffffff; --hein-card-text: #d8e3ea; --hein-section-pad-y: 78px; position: relative; isolation: isolate; width: 100%; margin: 0 !important; padding: var(--hein-section-pad-y) 30px !important; overflow: hidden; /* * The Elementor background image stays assigned to this section. * * The animated ::before layer inherits that same image and * performs the cinematic movement above it. */ background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; } /* Predictable sizing */ .elementor-1910 .elementor-element.elementor-element-7e6be8e, .elementor-1910 .elementor-element.elementor-element-7e6be8e *, .elementor-1910 .elementor-element.elementor-element-7e6be8e *::before, .elementor-1910 .elementor-element.elementor-element-7e6be8e *::after { box-sizing: border-box; } /* Remove Elementor widget spacing */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .elementor-widget { margin-block-end: 0 !important; } /* ========================================================================== 2. CINEMATIC MOVING PHOTO -------------------------------------------------------------------------- This is the slow photographic drift treatment used elsewhere on HEIN. IMPORTANT: The actual site photograph remains assigned as the Elementor background image of the main section. This pseudo-element inherits that background and becomes the animated photographic layer. The generous negative inset plus scale creates substantial overscan, preventing the edges of the photograph from becoming visible while the image moves. ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e::before { content: ""; position: absolute; /* * Oversize the photographic canvas before it even gets transformed. * This gives the animation plenty of room to move. */ inset: -12%; z-index: 0; pointer-events: none; /* * Inherit the Elementor section background. */ background-image: inherit; background-position: center center; background-repeat: no-repeat; background-size: cover; /* * Slight initial enlargement is intentional. */ transform: scale(1.12) translate3d(0, 0, 0); transform-origin: center center; will-change: transform; backface-visibility: hidden; animation: heinSafetyPhotoDrift 35s ease-in-out infinite alternate; } /* ========================================================================== 3. NETFLIX-STYLE PHOTO DRIFT -------------------------------------------------------------------------- Extremely slow, almost imperceptible movement. This avoids the obvious "background panning" appearance. Instead, the photograph subtly breathes and changes framing. ========================================================================== */ @keyframes heinSafetyPhotoDrift { 0% { transform: scale(1.12) translate3d( 0, 0, 0 ); } 33% { transform: scale(1.15) translate3d( -1%, 0.75%, 0 ); } 66% { transform: scale(1.13) translate3d( 1%, -0.75%, 0 ); } 100% { transform: scale(1.16) translate3d( -0.75%, -0.5%, 0 ); } } /* ========================================================================== 4. DARK PHOTO OVERLAY -------------------------------------------------------------------------- Kept separate from the animated photo so the colour treatment remains completely stationary while the photograph moves beneath it. ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 115deg, rgba(0, 23, 42, 0.97) 0%, rgba(0, 48, 87, 0.94) 54%, rgba(0, 35, 63, 0.91) 100% ); } /* ========================================================================== 5. 1200PX SHELL ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__inner { position: relative; z-index: 2; display: flex !important; width: 100% !important; max-width: 1200px !important; min-width: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 34px !important; margin: 0 auto !important; padding: 0 !important; } /* * Elementor sometimes inserts an .e-con-inner wrapper. * Remove it from the layout equation if present. */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__inner > .e-con-inner { display: contents !important; } /* ========================================================================== 6. TECHNICAL GRID -------------------------------------------------------------------------- The animated photograph now occupies .elementor-1910 .elementor-element.elementor-element-7e6be8e::before and the dark colour treatment occupies .elementor-1910 .elementor-element.elementor-element-7e6be8e::after. Therefore the grid is generated from the content shell instead. It extends back out to the full viewport width and through the section's vertical padding so visually it behaves exactly like a section-level background. ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__inner::before { content: ""; position: absolute; top: calc(-1 * var(--hein-section-pad-y)); bottom: calc(-1 * var(--hein-section-pad-y)); left: 50%; z-index: -1; width: 100vw; pointer-events: none; transform: translateX(-50%); opacity: 0.11; background-image: linear-gradient( rgba(255, 255, 255, 0.18) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px ); background-size: 48px 48px; background-position: center center; /* * Fade the technical grid away toward the sides. */ -webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba(0, 0, 0, 0.85) 18%, rgba(0, 0, 0, 0.85) 82%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, rgba(0, 0, 0, 0.85) 18%, rgba(0, 0, 0, 0.85) 82%, transparent 100% ); } /* ========================================================================== 7. HEADER ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__header { position: relative; z-index: 1; display: flex !important; width: 100% !important; max-width: 760px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0 !important; margin: 0 auto !important; padding: 0 !important; text-align: center; } /* ========================================================================== 8. EYEBROW / GLOBAL KICKER -------------------------------------------------------------------------- Add BOTH classes to the Elementor Heading widget: hein-safety-approach__eyebrow hein-kicker The global .hein-kicker system controls: - font-size - line-height - letter-spacing This section continues to control: - colour - font family - weight - spacing - decorative line - layout ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow { width: auto !important; margin: 0 auto 15px !important; padding: 0 !important; text-align: center; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow::before, .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow::after, .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow > .elementor-widget-container::before, .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow > .elementor-widget-container::after { content: none !important; display: none !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow .elementor-heading-title { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; margin: 0 !important; padding: 0 !important; color: var(--hein-orange) !important; font-family: "Open Sans", Arial, sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; text-align: center; white-space: nowrap; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow .elementor-heading-title::before { content: ""; display: block; width: 26px; height: 2px; flex: 0 0 26px; background: var(--hein-orange); } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow .elementor-heading-title::after { content: ""; display: block; width: 26px; height: 2px; flex: 0 0 26px; background: var(--hein-orange); } /* ========================================================================== 9. TITLE ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__title { width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__title .elementor-heading-title { width: 100%; max-width: 720px; margin: 0 auto !important; padding: 0 !important; color: var(--hein-white) !important; font-family: "Aller", "Open Sans", Arial, sans-serif !important; font-size: clamp(35px, 3.5vw, 50px) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.032em !important; text-transform: uppercase !important; text-align: center !important; text-wrap: balance; } /* ========================================================================== 10. PRINCIPLES GRID ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__grid { position: relative; z-index: 1; display: flex !important; width: 100% !important; min-width: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== 11. PRINCIPLE CARD ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle { position: relative; display: flex !important; flex: 0 1 calc((100% - 32px) / 3); min-width: 0; min-height: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0 !important; margin: 0 !important; padding: 24px 24px 22px !important; overflow: hidden; background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 15, 28, 0.14); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: default; transition: none !important; transform: none !important; } /* Small orange accent cap */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--hein-orange); border-radius: 12px 0 3px 0; } /* No connector / mortar lines */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle::after { content: none !important; display: none !important; } /* Explicitly keep cards static on hover */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle:hover { transform: none !important; background: rgba(255, 255, 255, 0.075) !important; border-color: rgba(255, 255, 255, 0.15) !important; box-shadow: 0 12px 28px rgba(0, 15, 28, 0.14) !important; } /* ========================================================================== 12. ICON ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__icon { display: block; width: auto !important; margin: 0 0 15px !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__icon .elementor-icon-wrapper { display: flex; align-items: center; justify-content: flex-start; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__icon .elementor-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--hein-orange) !important; font-size: 27px !important; line-height: 1 !important; transition: none !important; transform: none !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__icon .elementor-icon svg { display: block; width: 27px !important; height: 27px !important; fill: currentColor; transition: none !important; transform: none !important; } /* Prevent Elementor icon hover styles */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle:hover .hein-safety-principle__icon .elementor-icon { color: var(--hein-orange) !important; transform: none !important; } /* ========================================================================== 13. CARD TITLE ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__title { width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__title .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: var(--hein-white) !important; font-family: "Aller", "Open Sans", Arial, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.22 !important; letter-spacing: -0.015em !important; text-transform: none !important; } /* ========================================================================== 14. CARD COPY ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__text { width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__text, .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__text p { color: var(--hein-card-text) !important; font-family: "Open Sans", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.56 !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__text p { margin: 0 !important; } /* ========================================================================== 15. REDUCED MOTION -------------------------------------------------------------------------- Accessibility: Keep the cinematic crop but completely stop the animation when the visitor has requested reduced motion at the operating-system level. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .elementor-1910 .elementor-element.elementor-element-7e6be8e::before { animation: none !important; transform: scale(1.12) translate3d(0, 0, 0) !important; } } /* ========================================================================== 16. TABLET ========================================================================== */ @media (max-width: 1024px) { .elementor-1910 .elementor-element.elementor-element-7e6be8e { --hein-section-pad-y: 70px; padding: var(--hein-section-pad-y) 28px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__inner { gap: 32px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__grid { gap: 16px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle { flex-basis: calc((100% - 16px) / 2); } } /* ========================================================================== 17. STACKED TABLET ========================================================================== */ @media (max-width: 820px) { .elementor-1910 .elementor-element.elementor-element-7e6be8e { --hein-section-pad-y: 64px; padding: var(--hein-section-pad-y) 24px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__title .elementor-heading-title { font-size: clamp(34px, 6vw, 44px) !important; } } /* ========================================================================== 18. MOBILE ========================================================================== */ @media (max-width: 767px) { .elementor-1910 .elementor-element.elementor-element-7e6be8e { --hein-section-pad-y: 56px; padding: 56px 20px 60px !important; } /* * Extend through the slightly larger bottom padding on mobile. */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__inner::before { top: -56px; bottom: -60px; background-size: 36px 36px; } /* * Keep movement gentler on the smaller canvas. */ .elementor-1910 .elementor-element.elementor-element-7e6be8e::before { inset: -14%; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__inner { gap: 28px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__eyebrow { margin-bottom: 13px !important; } /* * Kicker typography is controlled globally by .hein-kicker. * No local mobile font-size override is applied here. */ .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__title .elementor-heading-title { max-width: none; font-size: clamp(33px, 8.8vw, 42px) !important; line-height: 1.08 !important; text-wrap: pretty; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__grid { gap: 14px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle { flex: 0 0 100%; width: 100% !important; padding: 22px 22px 20px !important; border-radius: 12px; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__icon .elementor-icon { font-size: 25px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__icon .elementor-icon svg { width: 25px !important; height: 25px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-principle__title .elementor-heading-title { font-size: 18px !important; } } /* ========================================================================== 19. SMALL MOBILE ========================================================================== */ @media (max-width: 420px) { .elementor-1910 .elementor-element.elementor-element-7e6be8e { --hein-section-pad-y: 52px; padding: 52px 18px 56px !important; } .elementor-1910 .elementor-element.elementor-element-7e6be8e .hein-safety-approach__inner::before { top: -52px; bottom: -56px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-dce953f *//* ========================================================================== HEIN HEALTH & SAFETY 03 - ISO 45001 -------------------------------------------------------------------------- APPLY TO: 03 - ISO 45001 CSS CLASS: hein-safety-iso MASTER: hein-safety-end-master KICKER CLASSES: hein-safety-iso__eyebrow hein-kicker UPDATED: - Background/grid removed from this individual section - Ambient sweep moved to master container - Transparent section background - Rebalanced spacing now that Safety Close follows - 1200px HEIN shell - Established eyebrow treatment - Restrained ISO visual GLOBAL KICKER SYSTEM: - font-size controlled globally - line-height controlled globally - letter-spacing controlled globally ========================================================================== */ /* ========================================================================== 1. SECTION ROOT ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-dce953f { --hein-blue: #003057; --hein-blue-dark: #001f38; --hein-orange: #f58220; --hein-white: #ffffff; --hein-body: #41596a; --hein-border: rgba(0, 48, 87, 0.13); position: relative; z-index: 2; width: 100%; margin: 0 !important; padding: 76px 30px 64px !important; overflow: visible; color: var(--hein-body); background: transparent !important; } /* Predictable sizing */ .elementor-1910 .elementor-element.elementor-element-dce953f, .elementor-1910 .elementor-element.elementor-element-dce953f *, .elementor-1910 .elementor-element.elementor-element-dce953f *::before, .elementor-1910 .elementor-element.elementor-element-dce953f *::after { box-sizing: border-box; } /* Remove any legacy section-level background effects */ .elementor-1910 .elementor-element.elementor-element-dce953f::before, .elementor-1910 .elementor-element.elementor-element-dce953f::after { content: none !important; display: none !important; } /* Remove Elementor widget spacing */ .elementor-1910 .elementor-element.elementor-element-dce953f .elementor-widget { margin-block-end: 0 !important; } /* ========================================================================== 2. 1200PX SHELL ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__inner { position: relative; z-index: 2; display: grid !important; width: 100% !important; max-width: 1200px !important; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); column-gap: clamp(56px, 7vw, 90px); align-items: center; margin: 0 auto !important; padding: 0 !important; background: transparent !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__inner > .e-con-inner { display: contents !important; } /* ========================================================================== 3. COPY COLUMN ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__copy { position: relative; z-index: 2; display: flex !important; width: 100% !important; max-width: 720px; min-width: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* ========================================================================== 4. EYEBROW / GLOBAL KICKER -------------------------------------------------------------------------- Add BOTH classes to the Elementor Heading widget: hein-safety-iso__eyebrow hein-kicker Global .hein-kicker controls: - font-size - line-height - letter-spacing This section controls: - colour - font family - font weight - spacing - decorative line - layout ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow { width: auto !important; margin: 0 0 15px !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow::before, .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow::after, .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow > .elementor-widget-container::before, .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow > .elementor-widget-container::after { content: none !important; display: none !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow .elementor-heading-title { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; color: var(--hein-orange) !important; font-family: "Open Sans", Arial, sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; white-space: nowrap; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow .elementor-heading-title::before { content: ""; display: block; width: 26px; height: 2px; flex: 0 0 26px; background: var(--hein-orange); } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow .elementor-heading-title::after { content: none !important; display: none !important; } /* ========================================================================== 5. TITLE ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__title { width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__title .elementor-heading-title { width: 100%; max-width: 650px; margin: 0 !important; padding: 0 !important; color: var(--hein-blue) !important; font-family: "Aller", "Open Sans", Arial, sans-serif !important; font-size: clamp(35px, 3.5vw, 50px) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.032em !important; text-transform: uppercase !important; text-align: left !important; text-wrap: balance; } /* ========================================================================== 6. BODY COPY ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__text { width: 100% !important; max-width: 680px; margin: 0 !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__text, .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__text p { color: var(--hein-body) !important; font-family: "Open Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.68 !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__text p { margin: 0 0 16px !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__text p:last-child { margin-bottom: 0 !important; } /* ========================================================================== 7. ISO VISUAL PANEL ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__visual { position: relative; z-index: 2; display: flex !important; width: 100% !important; min-height: 250px; flex-direction: column; justify-content: center; align-items: center; margin: 0 !important; padding: 32px !important; overflow: hidden; background: rgba(255, 255, 255, 0.94) !important; border: 1px solid var(--hein-border); border-radius: 16px; box-shadow: 0 14px 34px rgba(0, 31, 56, 0.075); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* Orange technical accent */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__visual::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; background: var(--hein-orange); } /* Keep panel interior clean */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__visual::after { content: none !important; display: none !important; } /* ========================================================================== 8. ISO IMAGE ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__image { position: relative; z-index: 1; display: block; width: 100% !important; max-width: 205px; margin: 0 auto !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__image .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__image img { display: block; width: 100% !important; height: auto; margin: 0 auto; } /* ========================================================================== 9. TABLET ========================================================================== */ @media (max-width: 1024px) { .elementor-1910 .elementor-element.elementor-element-dce953f { padding: 66px 28px 58px !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__inner { grid-template-columns: minmax(0, 1fr) minmax(190px, 240px); column-gap: 44px; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__visual { min-height: 220px; padding: 28px !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__image { max-width: 175px; } } /* ========================================================================== 10. STACKED TABLET ========================================================================== */ @media (max-width: 820px) { .elementor-1910 .elementor-element.elementor-element-dce953f { padding: 60px 24px 54px !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__inner { grid-template-columns: 1fr; row-gap: 36px; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__copy { max-width: 680px; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__visual { width: min(100%, 360px) !important; min-height: 220px; justify-self: start; } } /* ========================================================================== 11. MOBILE ========================================================================== */ @media (max-width: 767px) { .elementor-1910 .elementor-element.elementor-element-dce953f { padding: 54px 20px 48px !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__inner { row-gap: 30px; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__eyebrow { margin-bottom: 13px !important; } /* * Kicker typography is controlled globally by .hein-kicker. * No local mobile font-size override is applied here. */ .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__title { margin-bottom: 17px !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__title .elementor-heading-title { max-width: none; font-size: clamp(33px, 8.8vw, 42px) !important; line-height: 1.08 !important; text-wrap: pretty; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__text, .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__text p { font-size: 16px !important; line-height: 1.65 !important; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__visual { width: 100% !important; min-height: 200px; padding: 26px !important; border-radius: 14px; } .elementor-1910 .elementor-element.elementor-element-dce953f .hein-safety-iso__image { max-width: 165px; } } /* ========================================================================== 12. SMALL MOBILE ========================================================================== */ @media (max-width: 420px) { .elementor-1910 .elementor-element.elementor-element-dce953f { padding: 48px 18px 44px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-79fc3ca *//* ========================================================================== HEIN HEALTH & SAFETY 04 - SAFETY CLOSE -------------------------------------------------------------------------- APPLY TO: 04 - Safety Close CSS CLASS: hein-safety-close STRUCTURE: Safety Close Shell hein-safety-close__shell ├── Safety Close Statement │ hein-safety-close__content hein-safety-close__statement │ │ └── Close Title │ hein-safety-close__title │ └── Safety Close Support hein-safety-close__content hein-safety-close__support └── Close Text hein-safety-close__text PURPOSE: - Distinct editorial conclusion - Short, declarative closing statement - Supporting copy with clear hierarchy - Continuous Safety End Master background remains visible - No conventional kicker or CTA treatment ========================================================================== */ /* ========================================================================== 1. SECTION ROOT ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-79fc3ca { --hein-blue: #003057; --hein-orange: #f58220; --hein-body: #4c6475; --hein-divider: rgba(0, 48, 87, 0.14); position: relative; z-index: 2; width: 100%; margin: 0 !important; padding: 88px 30px 112px !important; overflow: visible; background: transparent !important; } /* Predictable sizing */ .elementor-1910 .elementor-element.elementor-element-79fc3ca, .elementor-1910 .elementor-element.elementor-element-79fc3ca *, .elementor-1910 .elementor-element.elementor-element-79fc3ca *::before, .elementor-1910 .elementor-element.elementor-element-79fc3ca *::after { box-sizing: border-box; } /* Remove Elementor widget spacing */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .elementor-widget { margin-block-end: 0 !important; } /* ========================================================================== 2. SEPARATION FROM ISO ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-79fc3ca::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1200px, calc(100% - 60px)); height: 1px; transform: translateX(-50%); pointer-events: none; background: linear-gradient( 90deg, transparent 0%, rgba(0, 48, 87, 0.04) 8%, rgba(0, 48, 87, 0.11) 25%, rgba(0, 48, 87, 0.11) 75%, rgba(0, 48, 87, 0.04) 92%, transparent 100% ); } /* No local background layer */ .elementor-1910 .elementor-element.elementor-element-79fc3ca::after { content: none !important; display: none !important; } /* ========================================================================== 3. 1200PX CLOSING SHELL -------------------------------------------------------------------------- Slightly tighter proportions than previous version. The support column is visually attached to its divider rather than separated by a floating line in the middle of the section. ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__shell { position: relative; z-index: 2; display: grid !important; width: 100% !important; max-width: 1200px !important; min-width: 0; grid-template-columns: minmax(0, 0.92fr) minmax(380px, 0.88fr); column-gap: clamp(56px, 6vw, 86px); align-items: center; margin: 0 auto !important; padding: 0 !important; background: transparent !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__shell > .e-con-inner { display: contents !important; } /* ========================================================================== 4. SHARED COLUMN RESET ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__content { position: relative; z-index: 2; display: flex !important; width: 100% !important; min-width: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left; background: transparent !important; } /* ========================================================================== 5. STATEMENT COLUMN ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__statement { width: 100% !important; max-width: 540px; padding: 25px 0 0 !important; } /* Primary orange closing accent */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__statement::before { content: ""; position: absolute; top: 0; left: 0; width: 62px; height: 3px; background: var(--hein-orange); } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__statement::after { content: none !important; display: none !important; } /* ========================================================================== 6. CLOSING TITLE ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__title { width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__title .elementor-heading-title { width: 100%; max-width: 525px; margin: 0 !important; padding: 0 !important; color: var(--hein-blue) !important; font-family: "Aller", "Open Sans", Arial, sans-serif !important; font-size: clamp(38px, 3.4vw, 48px) !important; font-weight: 700 !important; line-height: 1.07 !important; letter-spacing: -0.03em !important; text-transform: uppercase !important; text-align: left !important; text-wrap: balance; } /* ========================================================================== 7. SUPPORT COLUMN -------------------------------------------------------------------------- The divider now belongs to the copy column itself. This makes the composition feel more intentional and removes the arbitrary floating line from the previous version. ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__support { width: 100% !important; max-width: 520px; justify-self: end; padding: 5px 0 5px 38px !important; border-left: 1px solid var(--hein-divider); } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__support::before, .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__support::after { content: none !important; display: none !important; } /* ========================================================================== 8. SUPPORTING COPY ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text { width: 100% !important; max-width: 480px; margin: 0 !important; padding: 0 !important; text-align: left; } /* Base paragraph */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text, .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text p { color: var(--hein-body) !important; font-family: "Open Sans", Arial, sans-serif !important; font-size: 16.5px !important; font-weight: 400 !important; line-height: 1.72 !important; } /* Paragraph spacing */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text p { margin: 0 0 17px !important; } /* Lead statement */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text p:first-child { color: var(--hein-blue) !important; font-size: 18.5px !important; font-weight: 600 !important; line-height: 1.52 !important; margin-bottom: 14px !important; } /* Final paragraph */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text p:last-child { margin-bottom: 0 !important; } /* ========================================================================== 9. LARGE TABLET ========================================================================== */ @media (max-width: 1100px) { .elementor-1910 .elementor-element.elementor-element-79fc3ca { padding: 80px 28px 100px !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__shell { grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.88fr); column-gap: 54px; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__title .elementor-heading-title { font-size: clamp(36px, 3.9vw, 44px) !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__support { padding-left: 32px !important; } } /* ========================================================================== 10. STACKED TABLET ========================================================================== */ @media (max-width: 860px) { .elementor-1910 .elementor-element.elementor-element-79fc3ca { padding: 72px 26px 88px !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__shell { grid-template-columns: 1fr; row-gap: 38px; align-items: start; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__statement { max-width: 620px; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__title .elementor-heading-title { max-width: 580px; font-size: clamp(36px, 5.5vw, 44px) !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__support { max-width: 620px; justify-self: start; padding: 0 0 0 28px !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text { max-width: 560px; } } /* ========================================================================== 11. MOBILE ========================================================================== */ @media (max-width: 767px) { .elementor-1910 .elementor-element.elementor-element-79fc3ca { padding: 62px 20px 76px !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca::before { width: calc(100% - 40px); } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__shell { row-gap: 30px; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__statement { max-width: none; padding-top: 20px !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__statement::before { width: 48px; height: 3px; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__title .elementor-heading-title { max-width: none; font-size: clamp(32px, 8.5vw, 39px) !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; } /* * On mobile the border remains, but becomes a shorter * visual anchor rather than a large architectural divider. */ .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__support { max-width: none; padding: 2px 0 2px 20px !important; border-left-color: rgba(0, 48, 87, 0.16); } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text { max-width: none; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text, .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text p { font-size: 16px !important; line-height: 1.65 !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__text p:first-child { font-size: 17px !important; line-height: 1.52 !important; margin-bottom: 13px !important; } } /* ========================================================================== 12. SMALL MOBILE ========================================================================== */ @media (max-width: 420px) { .elementor-1910 .elementor-element.elementor-element-79fc3ca { padding: 56px 18px 68px !important; } .elementor-1910 .elementor-element.elementor-element-79fc3ca::before { width: calc(100% - 36px); } .elementor-1910 .elementor-element.elementor-element-79fc3ca .hein-safety-close__title .elementor-heading-title { font-size: clamp(30px, 8.7vw, 35px) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8bd3aa2 *//* ========================================================================== HEIN HEALTH & SAFETY ISO + SAFETY CLOSE MASTER -------------------------------------------------------------------------- APPLY TO: Safety End Master CSS CLASS: hein-safety-end-master PURPOSE: - One continuous background across ISO + Safety Close - Very subtle black-and-white project background image - Subtle ambient blue/orange moving sweep - Prevents seams and background resets between sections - No blueprint grid GLOBAL KICKER SYSTEM: - This master does NOT define kicker typography - Any kicker inside the child sections should also use: hein-kicker - Global CSS controls kicker font size, line height and letter spacing ========================================================================== */ /* ========================================================================== 1. MASTER ROOT ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-8bd3aa2 { --hein-blue: #003057; --hein-blue-dark: #001f38; --hein-orange: #f58220; --hein-white: #ffffff; --hein-safety-end-image: url("/wp-content/uploads/2026/01/Project-Flow-Tab-03.png"); position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; gap: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; /* ------------------------------------------------------------------------ BACKGROUND STACK Layer 1: Mostly opaque light gradient that washes out the photograph. Layer 2: Project photograph. background-blend-mode: - normal keeps the light wash behaving normally - luminosity removes the photograph's colour by blending it against the neutral white background The ambient sweep remains separate via ::after. ------------------------------------------------------------------------ */ background-color: #ffffff; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.955) 0%, rgba(255, 255, 255, 0.935) 28%, rgba(251, 252, 253, 0.925) 64%, rgba(247, 250, 252, 0.95) 100% ), var(--hein-safety-end-image) !important; background-size: 100% 100%, cover !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; background-blend-mode: normal, luminosity; } /* Predictable sizing */ .elementor-1910 .elementor-element.elementor-element-8bd3aa2, .elementor-1910 .elementor-element.elementor-element-8bd3aa2 *, .elementor-1910 .elementor-element.elementor-element-8bd3aa2 *::before, .elementor-1910 .elementor-element.elementor-element-8bd3aa2 *::after { box-sizing: border-box; } /* Remove accidental spacing from the master wrapper */ .elementor-1910 .elementor-element.elementor-element-8bd3aa2 > .e-con-inner { position: relative; z-index: 1; width: 100% !important; max-width: none !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } /* Ensure both child sections sit above background effects */ .elementor-1910 .elementor-element.elementor-element-8bd3aa2 .hein-safety-iso, .elementor-1910 .elementor-element.elementor-element-8bd3aa2 .hein-safety-close { position: relative; z-index: 2; width: 100%; margin: 0 !important; background: transparent !important; } /* ========================================================================== GLOBAL KICKER COMPATIBILITY -------------------------------------------------------------------------- Kicker typography is intentionally NOT defined at master level. Any Elementor Heading widget used as a kicker inside the ISO or Safety Close sections should have: hein-kicker in addition to its existing section-specific CSS class. The global .hein-kicker system controls: - font-size - line-height - letter-spacing Individual child sections remain responsible for: - colour - margins - alignment - decorative elements ========================================================================== */ /* ========================================================================== 2. CONTINUOUS AMBIENT SWEEP ========================================================================== */ .elementor-1910 .elementor-element.elementor-element-8bd3aa2::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 65deg, transparent 16%, rgba(0, 48, 87, 0.016) 31%, rgba(245, 130, 32, 0.032) 47%, rgba(0, 48, 87, 0.017) 61%, transparent 77% ); background-size: 220% 100%; background-position: -100% 50%; opacity: 1; animation: hein-safety-end-sweep 20s ease-in-out infinite alternate; /* * Softly fade the moving sweep at the top and bottom * so the effect does not start or stop abruptly. */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000000 12%, #000000 88%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, #000000 12%, #000000 88%, transparent 100% ); } @keyframes hein-safety-end-sweep { from { background-position: -100% 50%; } to { background-position: 100% 50%; } } /* ========================================================================== 3. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .elementor-1910 .elementor-element.elementor-element-8bd3aa2::after { animation: none !important; background-position: 50% 50%; } } /* ========================================================================== 4. MOBILE ========================================================================== */ @media (max-width: 767px) { /* * Slightly stronger white wash on mobile. * Photograph remains monochrome through luminosity blending. */ .elementor-1910 .elementor-element.elementor-element-8bd3aa2 { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.955) 28%, rgba(251, 252, 253, 0.95) 64%, rgba(247, 250, 252, 0.97) 100% ), var(--hein-safety-end-image) !important; background-position: center center, center center !important; } }/* End custom CSS */