/* ===== CareerConsultants.ca – Multi‑page Stabilizer (safe to include on every page) ===== Put this AFTER your main style.css on all pages. Purpose: fix hero/banner regressions without breaking inner pages. ==================================================================== */ /* 0) Cancel accidental global collapse/hide coming from earlier CSS */ .hero_area{ height:auto !important; } /* do NOT force 0 height */ .hero_bg_box{ display:flex !important; } /* make bg container renderable */ /* 1) Base hero layout (applies everywhere that uses .hero_area/.hero_bg_box) */ .hero_area{ position:relative !important; display:flex !important; flex-direction:column !important; } .hero_bg_box{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; overflow:hidden !important; z-index:0 !important; /* behind content */ justify-content:center !important; } .hero_bg_box .img-box{ width:100% !important; } .hero_bg_box .img-box img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } /* 2) Homepage (no .sub_page on ): keep full-height hero */ body:not(.sub_page) .hero_area{ min-height:100vh !important; } body:not(.sub_page) .hero_bg_box::before{ content:""; position:absolute; inset:0; background: linear-gradient(to right, rgba(0,0,0,.7), rgba(0,0,0,.25)); } /* 3) Inner pages default: compact header (collapse hero image) */ .sub_page .hero_area{ min-height:auto !important; height:auto !important; } .sub_page .hero_bg_box{ display:none !important; } /* do not show homepage image on inner pages */ /* 4) Opt‑in: big hero on specific inner pages Add .has-hero on to re‑enable the image on that inner page only … */ .has-hero .hero_bg_box{ display:flex !important; } .has-hero .hero_area{ min-height:60vh !important; } @media (max-width: 575.98px){ .has-hero .hero_area{ min-height:48vh !important; } } /* 5) Component banner (.inner-banner) — works anywhere (home or inner page) */ .inner-banner{ position:relative !important; width:100% !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; display:flex !important; align-items:center !important; justify-content:center !important; height:68svh; min-height:420px; } @supports not (height: 1svh){ .inner-banner{ height:68vh; } } .inner-banner .overlay{ position:absolute; inset:0; background:rgba(10,45,90,.55); } .inner-banner .container{ position:relative; z-index:2; } /* 6) Header layering so text/buttons never hide under nav */ .header_section{ position:absolute !important; top:0; left:0; width:100%; z-index:20 !important; } .slider_section{ padding-top:20px !important; } /* 7) Defensive reset */ img{ max-width:100%; height:auto; display:block; } *,*:before,*:after{ box-sizing:border-box; }