/* ============================================================ ALL ISLAND RESTORATION — REDESIGN: HERO (Phase 4, v4 — VIDEO) ------------------------------------------------------------ No photo. Three layers: 1) Betheme HTML5 background video -> back (z-index 0) 2) dark gradient overlay (::before) -> middle (z-index 1) legibility 3) hero content (headline/CTAs) -> front (z-index 2) The overlay is now a PSEUDO-ELEMENT painted OVER the video, not the section background (which sits behind the video and was the reason the overlay did nothing before). TUNE READABILITY: raise the rgba(6,10,14,..) alphas in :before if the headline is hard to read over the moving footage; lower them to let more of the video through. Requires: Section has class black-bg-section air-hero, and the Section Background | Video HTML5 (mp4) field is set. A poster image is optional (only shows before load / on mobile, never over the playing video). Scoped to body.redesign. Load AFTER nav.css and hero.css. ============================================================ */ /* hero shell — dark fallback color only (no photo, no bg gradient) */ body.redesign .air-hero{ position:relative !important; min-height:60vh !important; display:flex !important; align-items:center !important; overflow:hidden !important; padding:60px 0 !important; border-top:3px solid #4a9fd4 !important; background-color:#06121c !important; /* shows only until the video paints */ background-image:none !important; } /* make Betheme's background video fill the hero and sit at the back */ body.redesign .air-hero .mfn-video-wrap, body.redesign .air-hero .mfn-video-wrap video, body.redesign .air-hero > video, body.redesign .air-hero video{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; z-index:0 !important; } /* dark gradient overlay painted OVER the video, UNDER the content */ body.redesign .air-hero:before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important; background: linear-gradient(100deg, rgba(6,10,14,.85) 0%, rgba(6,10,14,.66) 34%, rgba(6,10,14,.32) 64%, rgba(6,10,14,.08) 100%), linear-gradient(rgba(6,10,14,.22), rgba(6,10,14,.22)) !important; } /* content anchored to the left, above everything */ body.redesign .air-hero .section_wrapper{ position:relative !important; z-index:2 !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 6% !important; } body.redesign .air-hero .wrap, body.redesign .air-hero .mcb-wrap-inner, body.redesign .air-hero .column{ width:100% !important; max-width:640px !important; margin:0 !important; float:none !important; } body.redesign .air-hero .column_attr, body.redesign .air-hero .column_attr > div{ text-align:left !important; } /* headline (keeps your existing H1 text) */ body.redesign .air-hero h1{ color:#fff !important; font-family:"Barlow Condensed","Poppins",sans-serif !important; font-weight:800 !important; font-size:clamp(32px,4vw,54px) !important; line-height:1.06 !important; margin:0 0 14px !important; text-shadow:0 2px 22px rgba(0,0,0,.55) !important; } body.redesign .air-hero h2{ margin:0 0 18px !important; text-align:left !important; } body.redesign .air-hero h2 a{ color:#6db8e8 !important; font-family:"Barlow Condensed","Poppins",sans-serif !important; font-weight:800 !important; font-size:clamp(24px,2.6vw,36px) !important; } body.redesign .air-hero p{ color:#dbe6f0 !important; max-width:600px; font-size:16px !important; line-height:1.6 !important; } /* "Available 24/7" badge */ body.redesign .air-badge{ display:inline-flex; align-items:center; gap:10px; background:rgba(74,159,212,.18); border:1px solid rgba(74,159,212,.55); color:#dbeefc; font-family:"Barlow",sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:8px 16px; border-radius:40px; margin:0 0 18px; } body.redesign .air-badge .dot{ width:8px; height:8px; border-radius:50%; background:#4a9fd4; display:inline-block; animation:airpulse 1.2s infinite; } @keyframes airpulse{ 0%,100%{opacity:1} 50%{opacity:.2} } /* CTA buttons */ body.redesign .air-hero a.button{ display:inline-block; margin:0 12px 10px 0 !important; border-radius:0 !important; -webkit-clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px)); clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px)); font-family:"Barlow Condensed","Poppins",sans-serif !important; font-weight:800 !important; letter-spacing:.05em !important; text-transform:uppercase !important; } body.redesign .air-hero a.button.button_theme{ background:#4a9fd4 !important; color:#06121c !important; } body.redesign .air-hero a.button:not(.button_theme){ background:transparent !important; color:#fff !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55) !important; } body.redesign .air-hero a.button:hover{ background:#6db8e8 !important; color:#06121c !important; } /* trust strip */ body.redesign .air-trust{ display:flex; flex-wrap:wrap; gap:20px 34px; margin:28px 0 0; } body.redesign .air-trust .ti{ display:flex; align-items:center; gap:11px; } body.redesign .air-trust .ti .ic{ font-size:20px; line-height:1; } body.redesign .air-trust .ti .lb{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9fb4c6; display:block; font-family:"Barlow",sans-serif; } body.redesign .air-trust .ti .vl{ font-size:15px; font-weight:700; color:#fff; display:block; font-family:"Barlow",sans-serif; } @media only screen and (max-width:767px){ body.redesign .air-hero{ min-height:auto !important; padding:50px 0 !important; } body.redesign .air-hero .section_wrapper{ padding:0 22px !important; } body.redesign .air-hero .wrap, body.redesign .air-hero .mcb-wrap-inner, body.redesign .air-hero .column{ max-width:100% !important; } body.redesign .air-trust{ gap:14px 22px; } } body.redesign #Content .air-hero h1, body.redesign #Content .air-hero .mcb-column h1 { font-size: clamp(40px, 5.5vw, 78px) !important; line-height: 0.98 !important; }