.elementor-753 .elementor-element.elementor-element-534ce89{--display:flex;--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-753 .elementor-element.elementor-element-66410b7{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-753 .elementor-element.elementor-element-aff23c4{--display:flex;--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-753 .elementor-element.elementor-element-391c096{--display:flex;--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-753 .elementor-element.elementor-element-6d6f3d5{--display:flex;--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-753 .elementor-element.elementor-element-f2bdc1e{--display:flex;--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-753 .elementor-element.elementor-element-51bdc73{--display:flex;--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-753 .elementor-element.elementor-element-62f677f{--display:flex;--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-753 .elementor-element.elementor-element-f272378{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-753 .elementor-element.elementor-element-04d2ea4{--display:flex;--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-753 .elementor-element.elementor-element-c0653de{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-0caf01d */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@700&display=swap'); /* ========================================================= ROOT ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3, #CEOJA_ME_ABOUT_CLEAR_V3 *, #CEOJA_ME_ABOUT_CLEAR_V3 *::before, #CEOJA_ME_ABOUT_CLEAR_V3 *::after{ box-sizing:border-box; min-width:0; } #CEOJA_ME_ABOUT_CLEAR_V3{ --ac3-red:#911611; --ac3-red-light:#b52d27; --ac3-black:#0e0f0e; --ac3-black-soft:#181818; --ac3-white:#ffffff; --ac3-text:#343434; --ac3-muted:#696969; --ac3-border: rgba(14,15,14,.13); position:relative; width:100% !important; max-width:100% !important; margin:0 !important; padding:5% !important; overflow:hidden; background: radial-gradient( circle at 8% 8%, rgba(145,22,17,.075), transparent 28rem ), radial-gradient( circle at 92% 90%, rgba(14,15,14,.045), transparent 30rem ), linear-gradient( 135deg, #ffffff 0%, #f8f8f8 55%, #eeeeee 100% ); font-family: "Montserrat", Arial, sans-serif; } #CEOJA_ME_ABOUT_CLEAR_V3::after{ content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.38; background: repeating-linear-gradient( 115deg, rgba(145,22,17,.025) 0, rgba(145,22,17,.025) 1px, transparent 1px, transparent 7px ); } /* ========================================================= INNER ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Inner{ position:relative; z-index:1; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); width:100%; max-width:100%; margin:0; align-items:stretch; gap: clamp( 50px, 6vw, 96px ); } /* ========================================================= VISUAL ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Visual{ display:flex; width:100%; height:100%; align-items:stretch; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Image{ position:relative; width:100%; height:100%; min-height:610px; overflow:hidden; border: 1px solid rgba(145,22,17,.16); border-radius: 26px 6px 26px 6px; background:#dddddd; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Image::before{ content:""; position:absolute; z-index:2; top:0; left:0; width:82px; height:82px; border-top: 2px solid var(--ac3-red); border-left: 2px solid var(--ac3-red); pointer-events:none; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Image::after{ content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background: linear-gradient( 180deg, transparent 56%, rgba(14,15,14,.30) ); } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Image img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition: transform .7s cubic-bezier(.22,.8,.26,1); } /* ========================================================= CONTENT ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Content{ display:flex; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; text-align:center; } /* ========================================================= KICKER ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Kicker{ display:block; width:100%; margin: 0 auto 12px; color:#0e0f0e; font-family: "Montserrat", Arial, sans-serif; font-size:11px; line-height:1.5; font-weight:800; letter-spacing:.14em; text-align:center; text-transform:uppercase; } /* ========================================================= H2 ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 h2{ width:100%; max-width:1200px; margin: 0 auto 20px; color:var(--ac3-black); font-family: "Poppins", Arial, sans-serif; font-size:48px; line-height:1.12; font-weight:700; letter-spacing:-.03em; text-align:center; } /* ========================================================= LEAD ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Lead{ width:100%; max-width:1000px; margin: 0 auto 28px; color:var(--ac3-text); font-family: "Montserrat", Arial, sans-serif; font-size:16px; line-height:1.70; font-weight:500; text-align:justify; text-align-last:center; } /* ========================================================= CARDS ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Cards{ display:grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); width:100%; margin: 0 auto 30px; align-items:stretch; gap:16px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card{ position:relative; display:flex; width:100%; height:100%; padding: 22px 18px; flex-direction:column; align-items:center; justify-content:flex-start; overflow:hidden; border: 1px solid var(--ac3-border); border-radius: 16px 4px 16px 4px; background: linear-gradient( 145deg, #ffffff, #f5f5f5 ); text-align:center; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card::after{ content:""; position:absolute; right:-20px; bottom:-20px; width:56px; height:56px; border: 1px solid rgba(145,22,17,.14); transform: rotate(45deg); pointer-events:none; } /* ========================================================= ICON ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Icon{ position:relative; display:flex; width:50px; height:50px; flex: 0 0 50px; margin: 0 auto 14px; align-items:center; justify-content:center; overflow:hidden; color:#ffffff; border-radius: 14px 4px 14px 4px; background: linear-gradient( 135deg, var(--ac3-red), #53100d ); } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Icon::after{ content:""; position:absolute; left:7px; right:7px; bottom:7px; height:2px; background: rgba(255,255,255,.55); } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Icon svg{ position:absolute; top:50%; left:50%; width:22px; height:22px; transform: translate(-50%,-50%); display:block; } /* ========================================================= CARD TYPOGRAPHY ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card h3{ width:100%; margin: 0 auto 8px; color:var(--ac3-black); font-family: "Montserrat", Arial, sans-serif; font-size:22px; line-height:1.25; font-weight:700; letter-spacing:-.02em; text-align:center; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card p{ width:100%; margin:0 auto; color:var(--ac3-muted); font-family: "Montserrat", Arial, sans-serif; font-size:14px; line-height:1.65; font-weight:500; text-align:justify; text-align-last:center; } /* ========================================================= ACTIONS ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Actions{ display:flex; width:100%; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:14px; } /* ========================================================= LEN BUTTON SYSTEM ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Button{ -webkit-appearance:none; appearance:none; position:relative; isolation:isolate; display:inline-flex; min-width:225px; min-height:60px; padding: 0 34px; align-items:center; justify-content:center; overflow:hidden; border: 1px solid var(--button-border); border-radius: 12px 3px 12px 3px; color: var(--button-text); background: var(--button-bg); font-family: "Montserrat", Arial, sans-serif; font-size:14px; line-height:1; font-weight:700; text-decoration:none; text-align:center; white-space:nowrap; transform:none !important; transition: color .35s ease, border-color .35s ease; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Button > span{ position:relative; z-index:3; } /* HOVER SURFACE */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Button::before{ content:""; position:absolute; z-index:1; inset:0; opacity:0; background: linear-gradient( 110deg, var(--hover-one), var(--hover-two) ); transition: opacity .4s ease; } /* BOTTOM LINE */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Button::after{ content:""; position:absolute; z-index:4; left:22px; bottom:10px; width:28px; height:2px; border-radius:999px; background: var(--button-line); transition: width .45s cubic-bezier(.2,.8,.2,1), background .35s ease; } /* PRIMARY */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_ButtonPrimary{ --button-bg:#911611; --button-text:#ffffff; --button-border:#911611; --button-line:#ffffff; --hover-one:#911611; --hover-two:#0e0f0e; --hover-text:#ffffff; --hover-border:#0e0f0e; --hover-line:#ffffff; } /* SECONDARY */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_ButtonSecondary{ --button-bg:#ffffff; --button-text:#0e0f0e; --button-border:#0e0f0e; --button-line:#911611; --hover-one:#0e0f0e; --hover-two:#911611; --hover-text:#ffffff; --hover-border:#911611; --hover-line:#ffffff; } /* ========================================================= SWIPE ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_SwipeNote{ display:none; } /* ========================================================= DESKTOP HOVER ========================================================= */ @media (hover:hover) and (pointer:fine){ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Image:hover img{ transform: scale(1.025); } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Button:hover{ color: var(--hover-text); border-color: var(--hover-border); } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Button:hover::before{ opacity:1; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Button:hover::after{ width: calc(100% - 44px); background: var(--hover-line); } } /* ========================================================= FOCUS ========================================================= */ #CEOJA_ME_ABOUT_CLEAR_V3 a:focus-visible{ outline: 3px solid var(--ac3-red); outline-offset:4px; } /* ========================================================= MEDIUM DESKTOP ========================================================= */ @media (min-width:992px) and (max-width:1229px){ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Inner{ gap:40px; } #CEOJA_ME_ABOUT_CLEAR_V3 h2{ font-size:40px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Image{ min-height:560px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Cards{ grid-template-columns:1fr; } } /* ========================================================= TABLET + MOBILE HEADER → IMAGE → SWIPE → CARDS → BUTTONS ========================================================= */ @media(max-width:991px){ #CEOJA_ME_ABOUT_CLEAR_V3{ width:100% !important; max-width:100% !important; margin:0 !important; padding:5% !important; overflow:hidden !important; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Inner{ display:flex !important; width:100%; max-width:100%; flex-direction:column !important; gap:0 !important; } /* * Makes children participate directly * in the responsive flex order. */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Content{ display:contents !important; } /* KICKER */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Kicker{ order:1; width:100%; margin: 0 auto 12px; text-align:center; } /* H2 */ #CEOJA_ME_ABOUT_CLEAR_V3 h2{ order:2; width:100%; max-width:1200px; margin: 0 auto 20px; font-size:40px; text-align:center; } /* LEAD */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Lead{ order:3; width:100%; max-width:1000px; margin: 0 auto 28px; text-align:justify; text-align-last:center; } /* IMAGE */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Visual{ order:4; display:block; width:100%; height:auto; margin: 0 auto 20px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Image{ position:relative; width:100%; height:auto; min-height:0; aspect-ratio: 16 / 9; margin:0; border-radius: 22px 5px 22px 5px; } /* SWIPE */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_SwipeNote{ order:5; display:flex; width:100%; max-width:100%; margin: 0 auto 12px; align-items:center; justify-content:center; gap:8px; color:var(--ac3-red); font-family: "Montserrat", Arial, sans-serif; font-size:11px; line-height:1.4; font-weight:700; letter-spacing:.08em; text-align:center; text-transform:uppercase; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_SwipeChevron{ position:relative; display:inline-flex; width:16px; height:16px; flex: 0 0 16px; align-items:center; justify-content:center; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_SwipeChevron svg{ position:absolute; top:50%; left:50%; width:16px; height:16px; transform: translate(-50%,-50%); } /* CARDS SWIPE */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Cards{ order:6; display:flex !important; width:100%; max-width:100%; margin: 0 auto 30px; padding: 0 0 6px; flex-wrap:nowrap !important; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:auto; -webkit-overflow-scrolling:touch; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Cards::-webkit-scrollbar{ display:none; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card{ flex: 0 0 100%; width:100%; min-width:100%; max-width:100%; height:auto; align-items:center; justify-content:flex-start; scroll-snap-align:start; scroll-snap-stop:always; text-align:center; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card h3{ text-align:center; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card p{ text-align:justify; text-align-last:center; } /* ACTIONS */ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Actions{ order:7; display:flex; width:100%; margin:0; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:12px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:767px){ #CEOJA_ME_ABOUT_CLEAR_V3 h2{ font-size:32px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Lead{ font-size:15px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Image{ aspect-ratio: 4 / 3; border-radius: 20px 5px 20px 5px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card h3{ font-size:20px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Card p{ font-size:14px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Actions{ display:grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap:10px; } #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Button{ width:100%; min-width:0; padding: 0 18px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:420px){ #CEOJA_ME_ABOUT_CLEAR_V3 .CEOJA_ME_AC3_Actions{ grid-template-columns:1fr; width:100%; max-width:320px; margin: 0 auto; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ #CEOJA_ME_ABOUT_CLEAR_V3 *, #CEOJA_ME_ABOUT_CLEAR_V3 *::before, #CEOJA_ME_ABOUT_CLEAR_V3 *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-ceaa400 */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@700&display=swap'); /* ========================================================= GLOBAL ========================================================= */ #CEOJA_BNC_HomeServices_V3, #CEOJA_BNC_HomeServices_V3 *, #CEOJA_BNC_HomeServices_V3 *::before, #CEOJA_BNC_HomeServices_V3 *::after{ box-sizing:border-box; min-width:0; box-shadow:none !important; text-shadow:none !important; } #CEOJA_BNC_HomeServices_V3 a{ text-decoration:none; } /* ========================================================= ROOT ========================================================= */ #CEOJA_BNC_HomeServices_V3{ --lhd-white:#ffffff; --lhd-black:#0e0f0e; --lhd-black-soft:#181818; --lhd-red:#911611; --lhd-red-light:#b83b35; --lhd-gray:#a0a0a0; --lhd-gray-light:#d4d4d4; position:relative; width:100% !important; max-width:100% !important; margin:0 !important; padding:5% !important; overflow:hidden; color:#ffffff; background: radial-gradient( ellipse at 8% 7%, rgba(145,22,17,.34), transparent 30% ), radial-gradient( ellipse at 96% 91%, rgba(145,22,17,.18), transparent 29% ), radial-gradient( ellipse at 50% 110%, rgba(255,255,255,.045), transparent 32% ), linear-gradient( 135deg, #190504 0%, #111111 31%, #080808 66%, #040404 100% ); font-family: "Montserrat", Arial, sans-serif; } /* ========================================================= BACKGROUND DETAILS ========================================================= */ #CEOJA_BNC_HomeServices_V3::before{ content:""; position:absolute; z-index:0; top:0; left:5%; right:5%; height:1px; background: linear-gradient( 90deg, transparent, rgba(145,22,17,.75), rgba(255,255,255,.12), transparent ); pointer-events:none; } #CEOJA_BNC_HomeServices_V3::after{ content:""; position:absolute; z-index:0; top:-190px; right:-160px; width:470px; height:470px; border: 1px solid rgba(255,255,255,.035); transform: rotate(35deg); pointer-events:none; } /* ========================================================= HEADER ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_top{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,1fr) minmax(320px,.58fr); width:100%; margin-bottom: clamp( 30px, 3vw, 46px ); align-items:end; gap: clamp( 30px, 5vw, 70px ); } /* ========================================================= KICKER NO RED TEXT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_kicker{ display:inline-flex; margin-bottom:13px; align-items:center; gap:10px; color: rgba(255,255,255,.70); font-size:12px; line-height:1.5; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_kicker::before{ content:""; display:block; width:36px; height:2px; flex: 0 0 36px; background: linear-gradient( 90deg, var(--lhd-red), rgba(255,255,255,.72) ); } /* ========================================================= H2 ========================================================= */ #CEOJA_BNC_HomeServices_V3 h2{ width:100%; max-width:1200px; margin:0; color:#ffffff; font-family: "Poppins", Arial, sans-serif; font-size:48px; line-height:1.12; font-weight:700; letter-spacing:-.03em; } /* ========================================================= INTRO ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_intro{ width:100%; max-width:1000px; margin:0; color: rgba(255,255,255,.69); font-size:16px; line-height:1.7; font-weight:500; text-align:justify; text-align-last:left; } /* ========================================================= STAGE ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_stage{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(340px,.80fr) minmax(0,1.20fr); width:100%; align-items:stretch; gap: clamp( 16px, 2vw, 26px ); } /* ========================================================= FEATURED ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured{ position:relative; display:flex; width:100%; min-height:520px; overflow:hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 26px 7px 26px 7px; color:#ffffff; background:#111111; transform:none !important; transition: border-color .30s ease; } /* ========================================================= FEATURED RED ARCHITECTURAL CORNER RED USED AS SHAPE ONLY ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured::before{ content:""; position:absolute; z-index:4; top:0; left:0; width:82px; height:82px; border-top: 2px solid var(--lhd-red); border-left: 2px solid var(--lhd-red); pointer-events:none; } /* ========================================================= FEATURED IMAGE ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featuredMedia{ position:absolute; z-index:0; inset:0; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featuredMedia img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* ========================================================= FEATURED SHADE ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featuredShade{ position:absolute; z-index:1; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(5,5,5,.04) 0%, rgba(5,5,5,.20) 32%, rgba(8,8,8,.95) 100% ), linear-gradient( 90deg, rgba(145,22,17,.10), transparent 56% ); } /* ========================================================= FEATURED CONTENT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featuredContent{ position:relative; z-index:3; display:flex; width:100%; padding: clamp( 25px, 3vw, 38px ); flex-direction:column; justify-content:flex-end; } /* ========================================================= FEATURED HEAD ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featuredHead{ display:flex; width:100%; align-items:center; gap:14px; } /* ========================================================= FEATURED NUMBER WHITE TEXT, RED BACKGROUND ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_number{ display:flex; width:46px; height:46px; flex: 0 0 46px; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.26); border-radius: 12px 3px 12px 3px; color:#ffffff; background: rgba(145,22,17,.72); font-size:13px; line-height:1; font-weight:800; } /* ========================================================= FEATURED TITLE ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured h3{ margin:0; color:#ffffff; font-family: "Montserrat", Arial, sans-serif; font-size: clamp( 30px, 2.5vw, 40px ); line-height:1.15; font-weight:700; } /* ========================================================= FEATURED COPY ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured p{ width:100%; max-width:520px; margin: 14px 0 0; color: rgba(255,255,255,.82); font-size:15px; line-height:1.65; font-weight:500; } /* ========================================================= FEATURED LINK NO RED TEXT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_explore{ display:flex; width:fit-content; margin-top:22px; align-items:center; gap:9px; color:#ffffff; font-size:13px; line-height:1.4; font-weight:800; letter-spacing:.03em; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_explore svg{ width:19px; height:19px; fill:none; stroke:#ffffff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= SERVICES WRAP ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_servicesWrap{ display:flex; width:100%; height:100%; flex-direction:column; } /* ========================================================= SERVICE GRID ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_grid{ display:grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); grid-template-rows: repeat( 2, minmax(0,1fr) ); width:100%; height:100%; gap:12px; } /* ========================================================= SERVICE CARD ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service{ position:relative; display:flex; min-height:250px; overflow:hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 20px 5px 20px 5px; color:#ffffff; background:#111111; transform:none !important; transition: border-color .30s ease; } /* ========================================================= BOTTOM ACCENT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service::after{ content:""; position:absolute; z-index:5; left:0; bottom:0; width:38px; height:3px; background: var(--lhd-red); transition: width .40s cubic-bezier(.2,.8,.2,1); } /* ========================================================= CARD IMAGE ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceImage{ position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; } /* ========================================================= CARD SHADE ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceShade{ position:absolute; z-index:1; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(5,5,5,.20) 0%, rgba(5,5,5,.34) 30%, rgba(5,5,5,.92) 100% ), linear-gradient( 115deg, rgba(145,22,17,.12), transparent 57% ); transition: background .30s ease; } /* ========================================================= SERVICE INNER ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceInner{ position:relative; z-index:2; display:flex; width:100%; min-height:100%; padding: 18px 18px 17px; flex-direction:column; justify-content:space-between; } /* ========================================================= SERVICE TOP ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceTop{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px; } /* ========================================================= NUMBER NO RED TEXT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceNumber{ color: rgba(255,255,255,.80); font-size:13px; line-height:1; font-weight:800; } /* ========================================================= ICON ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_icon{ position:relative; display:flex; width:44px; height:44px; flex: 0 0 44px; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.24); border-radius: 12px 3px 12px 3px; color:#ffffff; background: rgba(145,22,17,.62); } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_icon svg{ position:absolute; top:50%; left:50%; width:23px; height:23px; transform: translate(-50%,-50%); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= SERVICE BODY ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody{ margin-top:18px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody h3{ margin:0; color:#ffffff; font-family: "Montserrat", Arial, sans-serif; font-size: clamp( 21px, 1.7vw, 27px ); line-height:1.22; font-weight:700; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody p{ margin: 9px 0 0; color: rgba(255,255,255,.82); font-size:14px; line-height:1.58; font-weight:500; } /* ========================================================= SERVICE LINK NO RED TEXT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceLink{ display:flex; width:100%; margin-top:17px; padding-top:12px; align-items:center; justify-content:space-between; gap:12px; border-top: 1px solid rgba(255,255,255,.17); color:#ffffff; font-size:12px; line-height:1.3; font-weight:800; letter-spacing:.02em; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceLink svg{ width:18px; height:18px; fill:none; stroke:#ffffff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= SWIPE INDICATOR NO RED TEXT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_swipeIndicator{ display:none; width:fit-content; margin: 0 auto 14px; align-items:center; justify-content:center; gap:9px; color: rgba(255,255,255,.76); font-size:11px; line-height:1.4; font-weight:800; letter-spacing:.07em; text-align:center; text-transform:uppercase; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_swipeIndicator.CEOJA_isVisible{ display:flex; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_swipeIcon{ position:relative; display:flex; width:34px; height:18px; align-items:center; justify-content:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_swipeIcon svg{ position:absolute; top:50%; left:50%; width:34px; height:18px; transform: translate(-50%,-50%); fill:none; stroke: rgba(255,255,255,.84); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation: CEOJA_BNCHS3_swipeMotion 1.45s ease-in-out infinite; } @keyframes CEOJA_BNCHS3_swipeMotion{ 0%, 100%{ margin-left:0; } 50%{ margin-left:6px; } } /* ========================================================= FOOTER ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_footer{ position:relative; z-index:2; display:flex; width:100%; margin-top: clamp( 26px, 3vw, 40px ); align-items:center; gap: clamp( 22px, 4vw, 50px ); } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_footerLine{ height:1px; flex: 1 1 auto; background: linear-gradient( 90deg, rgba(255,255,255,.06), rgba(145,22,17,.70), rgba(255,255,255,.14) ); } /* ========================================================= ACTIONS ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_actions{ display:flex; flex: 0 0 auto; align-items:center; gap:12px; } /* ========================================================= BUTTON SYSTEM ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn{ -webkit-appearance:none; appearance:none; position:relative; isolation:isolate; display:inline-flex; min-width:225px; min-height:60px; padding: 0 34px; align-items:center; justify-content:center; overflow:hidden; border: 1px solid var(--button-border); border-radius: 12px 3px 12px 3px; color: var(--button-text); background: var(--button-bg); font-family: "Montserrat", Arial, sans-serif; font-size:14px; line-height:1; font-weight:700; text-align:center; text-decoration:none; white-space:nowrap; transform:none !important; transition: color .35s ease, border-color .35s ease; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn > span{ position:relative; z-index:3; } /* BUTTON GRADIENT */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn::before{ content:""; position:absolute; z-index:1; inset:0; opacity:0; background: linear-gradient( 110deg, var(--hover-one), var(--hover-two) ); transition: opacity .40s ease; } /* BUTTON LINE */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn::after{ content:""; position:absolute; z-index:4; left:22px; bottom:10px; width:28px; height:2px; border-radius:999px; background: var(--button-line); transition: width .45s cubic-bezier(.2,.8,.2,1), background .35s ease; } /* ========================================================= PRIMARY WHITE TEXT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btnPrimary{ --button-bg:#911611; --button-text:#ffffff; --button-border:#911611; --button-line:#ffffff; --hover-one:#911611; --hover-two:#0e0f0e; --hover-text:#ffffff; --hover-border:#ffffff; --hover-line:#ffffff; } /* ========================================================= SECONDARY BLACK TEXT ========================================================= */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btnSecondary{ --button-bg:#ffffff; --button-text:#0e0f0e; --button-border:#ffffff; --button-line:#0e0f0e; --hover-one:#ffffff; --hover-two:#a0a0a0; --hover-text:#0e0f0e; --hover-border:#ffffff; --hover-line:#0e0f0e; } /* ========================================================= DESKTOP HOVER ========================================================= */ @media (hover:hover) and (pointer:fine){ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured:hover{ border-color: rgba(145,22,17,.72); transform:none !important; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service:hover{ border-color: rgba(145,22,17,.70); transform:none !important; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service:hover::after{ width: calc(100% - 28px); } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service:hover .CEOJA_BNCHS3_serviceShade{ background: linear-gradient( 180deg, rgba(5,5,5,.15), rgba(5,5,5,.40) 34%, rgba(5,5,5,.95) 100% ), linear-gradient( 115deg, rgba(145,22,17,.24), transparent 58% ); } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn:hover{ color: var(--hover-text); border-color: var(--hover-border); } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn:hover::before{ opacity:1; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn:hover::after{ width: calc(100% - 44px); background: var(--hover-line); } } /* ========================================================= FOCUS ========================================================= */ #CEOJA_BNC_HomeServices_V3 a:focus-visible{ outline: 3px solid #ffffff; outline-offset:4px; } /* ========================================================= DESKTOP 992 — 1229 ORIGINAL COMPOSITION PRESERVED ========================================================= */ @media (min-width:992px) and (max-width:1229px){ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_top{ grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); gap:34px; } #CEOJA_BNC_HomeServices_V3 h2{ font-size:40px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_intro{ font-size:15px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_stage{ grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap:16px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured{ min-height:500px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service{ min-height:235px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceInner{ padding:16px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody p{ font-size:13px; } } /* ========================================================= TABLET <= 991 ========================================================= */ @media(max-width:991px){ #CEOJA_BNC_HomeServices_V3{ padding:5% !important; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_top{ grid-template-columns:1fr; gap:16px; text-align:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_kicker{ justify-content:center; width:fit-content; margin-left:auto; margin-right:auto; text-align:center; } #CEOJA_BNC_HomeServices_V3 h2{ width:100%; max-width:1200px; margin: 0 auto; font-size:40px; text-align:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_intro{ width:100%; max-width:1000px; margin: 0 auto; text-align:justify; text-align-last:center; } /* ===================================================== STAGE ====================================================== */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_stage{ grid-template-columns:1fr; gap:20px; } /* ===================================================== FEATURED ====================================================== */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured{ min-height:410px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featuredContent{ align-items:center; text-align:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featuredHead{ justify-content:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured h3{ text-align:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured p{ margin-left:auto; margin-right:auto; text-align:justify; text-align-last:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_explore{ margin-left:auto; margin-right:auto; text-align:center; } /* ===================================================== SERVICE SWIPE ====================================================== */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_servicesWrap{ width:100%; overflow:visible; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_grid{ display:flex; width:100%; max-width:100%; height:auto; gap:12px; padding: 3px 1px 8px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:auto; -webkit-overflow-scrolling:touch; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_grid::-webkit-scrollbar{ display:none; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service{ flex: 0 0 calc( ( 100% - 12px ) / 2 ); width: calc( ( 100% - 12px ) / 2 ); min-height:280px; scroll-snap-align:start; scroll-snap-stop:always; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceInner{ align-items:center; text-align:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceTop{ justify-content:center; gap:12px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody{ width:100%; text-align:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody h3{ text-align:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody p{ text-align:justify; text-align-last:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceLink{ justify-content:center; text-align:center; gap:10px; } /* ===================================================== FOOTER ====================================================== */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_footer{ flex-direction:column; gap:18px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_footerLine{ width:100%; flex:none; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_actions{ width:100%; justify-content:center; } } /* ========================================================= MOBILE <= 640 ========================================================= */ @media(max-width:640px){ #CEOJA_BNC_HomeServices_V3 h2{ font-size:32px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_intro{ font-size:15px; line-height:1.75; text-align:justify; text-align-last:center; } /* ===================================================== FEATURED ====================================================== */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured{ min-height:380px; border-radius: 20px 5px 20px 5px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featuredContent{ padding:22px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured h3{ font-size:30px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_featured p{ text-align:justify; text-align-last:center; } /* ===================================================== SERVICE SWIPE ====================================================== */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_grid{ gap:10px; padding: 4px 1px 10px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service{ flex: 0 0 86%; width:86%; min-height:300px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceInner{ padding: 18px 16px; } /* ===================================================== BUTTONS ====================================================== */ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_actions{ display:grid; grid-template-columns:1fr; width:100%; max-width:360px; margin: 0 auto; gap:10px; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn{ width:100%; min-width:0; min-height:58px; padding: 0 20px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:390px){ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service{ flex-basis:90%; width:90%; } } /* ========================================================= PATCH 01 — KICKER TABLET + MOBILE PRESERVED FROM ORIGINAL ========================================================= */ @media(max-width:991px){ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_kicker{ display:flex; width:fit-content; margin-left:auto; margin-right:auto; justify-content:center; align-items:center; gap:0; color: rgba(255,255,255,.72); text-align:center; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_kicker::before{ content:none !important; display:none !important; width:0 !important; height:0 !important; flex:none !important; } } /* ========================================================= PATCH 02 — MOBILE LIGHT GLASS PRESERVED FROM ORIGINAL ========================================================= */ @media(max-width:640px){ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody{ position:relative; width:100%; margin-top:14px; padding: 11px 12px; overflow:hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 12px 3px 12px 3px; background: rgba(10,10,10,.30); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody h3{ color:#ffffff; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_serviceBody p{ color: rgba(255,255,255,.92); } } /* ========================================================= PATCH 03 — TABLET SWIPE STABILITY KEEPS WIDTHS + REAL OVERFLOW ========================================================= */ @media (min-width:641px) and (max-width:991px){ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_grid{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; width:100% !important; max-width:100% !important; height:auto !important; overflow-x:auto !important; overflow-y:hidden !important; scroll-snap-type:x mandatory !important; scrollbar-width:none !important; touch-action:auto !important; -webkit-overflow-scrolling:touch !important; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_grid::-webkit-scrollbar{ display:none !important; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_service{ flex: 0 0 calc((100% - 12px) / 2) !important; width: calc((100% - 12px) / 2) !important; min-width: calc((100% - 12px) / 2) !important; max-width: calc((100% - 12px) / 2) !important; height:auto !important; scroll-snap-align:start !important; scroll-snap-stop:always !important; } } /* ========================================================= PATCH 04 — BUTTONS STAY TOGETHER ON TABLET ========================================================= */ @media (min-width:641px) and (max-width:991px){ #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_actions{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; width:100% !important; align-items:center !important; justify-content:center !important; gap:12px !important; } #CEOJA_BNC_HomeServices_V3 .CEOJA_BNCHS3_btn{ width:auto !important; min-width:225px !important; flex: 0 1 auto !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ #CEOJA_BNC_HomeServices_V3 *, #CEOJA_BNC_HomeServices_V3 *::before, #CEOJA_BNC_HomeServices_V3 *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-72da69b */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@700&display=swap'); /* ========================================================= GLOBAL ========================================================= */ #CEOJA_BNC_HomeAreas_V1, #CEOJA_BNC_HomeAreas_V1 *, #CEOJA_BNC_HomeAreas_V1 *::before, #CEOJA_BNC_HomeAreas_V1 *::after{ box-sizing:border-box; min-width:0; box-shadow:none !important; text-shadow:none !important; } #CEOJA_BNC_HomeAreas_V1 a{ text-decoration:none; } #CEOJA_BNC_HomeAreas_V1 button, #CEOJA_BNC_HomeAreas_V1 a{ font:inherit; } /* ========================================================= ROOT WHITE → LIGHT GRAY → BLACK MORE WHITE THAN BLACK ========================================================= */ #CEOJA_BNC_HomeAreas_V1{ --bnc-white:#ffffff; --bnc-black:#0e0f0e; --bnc-black-soft:#171717; --bnc-red:#911611; --bnc-red-light:#b93b35; --bnc-gray:#a0a0a0; position:relative; width:100%; max-width:100%; margin:0; padding:5%; overflow:hidden; color:#0e0f0e; background: radial-gradient( ellipse at 10% 18%, rgba(145,22,17,.055), transparent 25% ), radial-gradient( ellipse at 90% 48%, rgba(14,15,14,.055), transparent 28% ), linear-gradient( 180deg, #ffffff 0%, #ffffff 22%, #f7f7f7 42%, #ececec 60%, #bcbcbc 72%, #585858 84%, #171717 94%, #0e0f0e 100% ); font-family: "Montserrat", Arial, sans-serif; } /* ========================================================= DECORATION ========================================================= */ #CEOJA_BNC_HomeAreas_V1::before{ content:""; position:absolute; z-index:0; top:0; left:5%; right:5%; height:1px; background: linear-gradient( 90deg, transparent, rgba(14,15,14,.20), rgba(145,22,17,.42), transparent ); pointer-events:none; } #CEOJA_BNC_HomeAreas_V1::after{ content:""; position:absolute; z-index:0; top:-160px; right:-170px; width:470px; height:470px; border: 1px solid rgba(14,15,14,.05); transform: rotate(36deg); pointer-events:none; } /* ========================================================= HEADER ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_header{ position:relative; z-index:2; display:grid; justify-items:center; width:100%; max-width:1200px; margin: 0 auto 34px; text-align:center; } /* ========================================================= KICKER ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_kicker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:12px; color:#4a4a4a; font-size:12px; line-height:1.5; font-weight:800; letter-spacing:.10em; text-transform:uppercase; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_kicker::before, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_kicker::after{ content:""; display:block; width:32px; height:2px; background: linear-gradient( 90deg, rgba(14,15,14,.35), var(--bnc-red) ); } /* ========================================================= H2 ========================================================= */ #CEOJA_BNC_HomeAreas_V1 h2{ width:100%; max-width:1200px; margin:0; color:#0e0f0e; font-family: "Poppins", Arial, sans-serif; font-size:48px; line-height:1.12; font-weight:700; letter-spacing:-.03em; text-align:center; } /* ========================================================= HEADER PARAGRAPH ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_header p{ width:100%; max-width:1000px; margin: 15px auto 0; color:#4e4e4e; font-size:16px; line-height:1.7; font-weight:500; text-align:justify; text-align-last:center; } /* ========================================================= SWIPE INDICATORS ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_swipeIndicator{ position:relative; z-index:2; display:none; width:fit-content; margin: 0 auto 12px; align-items:center; justify-content:center; gap:8px; color:#454545; font-size:12px; line-height:1.4; font-weight:800; letter-spacing:.06em; text-align:center; text-transform:uppercase; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_swipeIndicator.CEOJA_isVisible{ display:flex; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_swipeIcon{ position:relative; display:flex; width:34px; height:16px; align-items:center; justify-content:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_swipeIcon svg{ position:absolute; top:50%; left:50%; width:34px; height:16px; transform: translate(-50%,-50%); fill:none; stroke:#333333; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= COUNTY NAV ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyNav{ position:relative; z-index:2; display:grid; grid-template-columns: repeat( 5, minmax(0,1fr) ); width:100%; margin-bottom:16px; gap:8px; } /* ========================================================= COUNTY TAB ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTab{ display:grid; grid-template-columns: 31px minmax(0,1fr); width:100%; min-height:64px; padding: 12px 14px; align-items:center; gap:11px; border: 1px solid rgba(14,15,14,.12); border-radius: 13px 4px 13px 4px; color:#303030; background: linear-gradient( 145deg, rgba(255,255,255,.95), rgba(242,242,242,.86) ); font-size:13px; line-height:1.35; font-weight:700; text-align:left; cursor:pointer; transform:none !important; transition: color .28s ease, border-color .28s ease, background .28s ease; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTabText{ display:block; width:100%; min-width:0; white-space:normal; overflow-wrap:normal; word-break:normal; } /* ========================================================= COUNTY INDEX ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyIndex{ display:flex; width:31px; height:31px; align-items:center; justify-content:center; border: 1px solid rgba(14,15,14,.14); border-radius: 9px 3px 9px 3px; color:#252525; background: rgba(14,15,14,.045); font-size:11px; line-height:1; font-weight:800; } /* ========================================================= ACTIVE COUNTY ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTab.CEOJA_isActive{ color:#ffffff; border-color: rgba(145,22,17,.68); background: linear-gradient( 135deg, #292929, #0e0f0e ); } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTab.CEOJA_isActive .CEOJA_BNCHA1_countyIndex{ color:#ffffff; border-color: rgba(255,255,255,.30); background: var(--bnc-red); } /* ========================================================= STAGE ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_stage{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); width:100%; min-height:520px; overflow:hidden; border: 1px solid rgba(14,15,14,.14); border-radius: 24px 6px 24px 6px; background:#ffffff; } /* ========================================================= LOCATION PANEL ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationPanel{ display:flex; width:100%; padding: clamp( 26px, 3vw, 42px ); flex-direction:column; justify-content:center; border-right: 1px solid rgba(14,15,14,.12); background: radial-gradient( circle at 10% 10%, rgba(145,22,17,.045), transparent 34% ), linear-gradient( 145deg, #ffffff 0%, #f5f5f5 100% ); } /* ========================================================= LOCATION TOP ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationTop{ display:grid; grid-template-columns: minmax(0,1fr) auto; width:100%; align-items:center; gap:18px; } /* ========================================================= LOCATION LABEL ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationLabel{ display:block; margin-bottom:5px; color:#5a5a5a; font-size:12px; line-height:1.4; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } /* ========================================================= COUNTY NAME ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyName{ margin:0; color:#0e0f0e; font-family: "Montserrat", Arial, sans-serif; font-size:30px; line-height:1.2; font-weight:700; } /* ========================================================= VIEW COUNTY BUTTON ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_showCounty{ display:grid; grid-template-columns: minmax(0,1fr) 18px; min-height:48px; padding: 10px 13px; align-items:center; gap:9px; border: 1px solid rgba(14,15,14,.18); border-radius: 11px 3px 11px 3px; color:#0e0f0e; background:#ffffff; font-size:12px; line-height:1.3; font-weight:700; cursor:pointer; transition: color .28s ease, border-color .28s ease, background .28s ease; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_showCounty svg{ width:18px; height:18px; fill:none; stroke:#0e0f0e; stroke-width:1.8; } /* ========================================================= CITY HEADING ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityHeading{ display:flex; width:100%; margin-top:28px; margin-bottom:11px; align-items:end; justify-content:space-between; gap:14px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityHeading > span{ color:#0e0f0e; font-size:13px; line-height:1.4; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityHeading small{ color:#676767; font-size:12px; line-height:1.4; font-weight:500; } /* ========================================================= CITY GRID ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityGrid{ display:grid; grid-template-columns: repeat( 6, minmax(0,1fr) ); width:100%; gap:8px; } /* ========================================================= CITY ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city{ display:grid; grid-template-columns: minmax(0,1fr) 18px; grid-column: span 2; width:100%; min-height:62px; padding: 11px 12px; align-items:center; column-gap:9px; overflow:hidden; border: 1px solid rgba(14,15,14,.12); border-radius: 12px 3px 12px 3px; color:#2f2f2f; background: linear-gradient( 145deg, #ffffff, #eeeeee ); font-size:13px; line-height:1.35; font-weight:700; text-align:left; cursor:pointer; transform:none !important; transition: color .28s ease, border-color .28s ease, background .28s ease; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:nth-child(4){ grid-column: 1 / span 3; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:nth-child(5){ grid-column: 4 / span 3; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city > span{ display:block; width:100%; min-width:0; white-space:normal; overflow-wrap:normal; word-break:normal; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city svg{ width:18px; height:18px; justify-self:end; fill:none; stroke:#333333; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= ACTIVE CITY ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city.CEOJA_isActive{ color:#ffffff; border-color: rgba(145,22,17,.75); background: linear-gradient( 105deg, #252525 0%, #0e0f0e 100% ); } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city.CEOJA_isActive svg{ stroke:#ffffff; } /* ========================================================= CURRENT SELECTION ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_currentSelection{ display:flex; width:100%; margin-top:18px; padding: 10px 12px; align-items:center; justify-content:space-between; gap:12px; border: 1px solid rgba(14,15,14,.12); border-radius: 10px 3px 10px 3px; background: rgba(14,15,14,.035); } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_currentSelectionLabel{ color:#666666; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_currentSelectionName{ color:#0e0f0e; font-size:13px; font-weight:700; } /* ========================================================= INFO BAR ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_infoBar{ display:flex; width:100%; margin-top:18px; padding-top:16px; align-items:center; justify-content:space-between; gap:16px; border-top: 1px solid rgba(14,15,14,.10); color:#666666; font-size:13px; line-height:1.4; font-weight:600; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_infoBar span{ display:flex; align-items:center; gap:8px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_infoBar svg{ width:19px; height:19px; fill:none; stroke:#333333; stroke-width:1.8; } /* ========================================================= MAP COLUMN ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_mapColumn{ display:grid; grid-template-rows: minmax(0,1fr) auto; width:100%; min-height:520px; scroll-margin-top:16px; background:#0e0f0e; } /* ========================================================= MAP ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_map{ position:relative; width:100%; min-height:440px; overflow:hidden; background:#d7d7d7; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_map iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; } /* ========================================================= DESTINATION CTA ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCTA{ position:relative; isolation:isolate; display:grid; grid-template-columns: minmax(0,1fr) 54px; width:100%; min-height:82px; padding: 15px 20px; align-items:center; gap:16px; overflow:hidden; border-top: 3px solid var(--bnc-red); color:#ffffff; background: linear-gradient( 105deg, #111111 0%, #0e0f0e 58%, #232323 100% ); } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCTA::before{ content:""; position:absolute; z-index:0; inset:0; opacity:0; background: linear-gradient( 105deg, #911611, #0e0f0e ); transition: opacity .35s ease; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCopy, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationIcon{ position:relative; z-index:2; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCopy{ display:flex; flex-direction:column; gap:3px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCopy small{ color: rgba(255,255,255,.58); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCopy strong{ color:#ffffff; font-size:17px; line-height:1.35; font-weight:700; } /* ========================================================= DESTINATION ICON ========================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationIcon{ position:relative; display:flex; width:48px; height:48px; align-items:center; justify-content:center; justify-self:end; border: 1px solid rgba(255,255,255,.28); border-radius: 12px 3px 12px 3px; color:#ffffff; background: rgba(255,255,255,.07); } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationIcon svg{ position:absolute; top:50%; left:50%; width:22px; height:22px; transform: translate(-50%,-50%); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) and (pointer:fine){ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTab:hover{ color:#0e0f0e; border-color: rgba(14,15,14,.25); background:#ffffff; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTab.CEOJA_isActive:hover{ color:#ffffff; border-color: rgba(145,22,17,.72); background: linear-gradient( 135deg, #292929, #0e0f0e ); } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_showCounty:hover{ color:#ffffff; border-color:#0e0f0e; background:#0e0f0e; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_showCounty:hover svg{ stroke:#ffffff; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:hover{ color:#0e0f0e; border-color: rgba(14,15,14,.22); background:#ffffff; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city.CEOJA_isActive:hover{ color:#ffffff; border-color: rgba(145,22,17,.75); background: linear-gradient( 105deg, #252525 0%, #0e0f0e 100% ); } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCTA:hover::before{ opacity:1; } } /* ========================================================= FOCUS ========================================================= */ #CEOJA_BNC_HomeAreas_V1 button:focus-visible, #CEOJA_BNC_HomeAreas_V1 a:focus-visible{ outline: 3px solid var(--bnc-red); outline-offset:3px; } /* ========================================================= 992 — 1229 KEEP DESKTOP COMPOSITION ========================================================= */ @media (min-width:992px) and (max-width:1229px){ #CEOJA_BNC_HomeAreas_V1 h2{ font-size:40px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyNav{ gap:6px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTab{ grid-template-columns: 27px minmax(0,1fr); min-height:60px; padding: 10px 8px; gap:7px; font-size:12px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyIndex{ width:27px; height:27px; font-size:10px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_stage{ grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); min-height:500px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationPanel{ padding: clamp( 22px, 2.2vw, 28px ); } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationTop{ grid-template-columns: minmax(0,1fr) minmax(150px,170px); gap:14px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyName{ font-size:26px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city{ grid-template-columns: minmax(0,1fr) 16px; min-height:60px; padding: 10px 9px; column-gap:6px; font-size:12px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city svg{ width:16px; height:16px; } /* ======================================================= PATCH PRESERVED COUNTY BUTTON WIDTH / TEXT ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_showCounty{ width:100%; min-width:0; grid-template-columns: minmax(0,1fr) 18px; padding: 10px 12px; gap:8px; font-size:12px; line-height:1.25; white-space:normal; overflow:hidden; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_showCounty > span{ display:block; width:100%; min-width:0; white-space:normal; overflow-wrap:normal; word-break:normal; text-align:left; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_showCounty svg{ width:17px; height:17px; flex: 0 0 auto; justify-self:end; } } /* ========================================================= TABLET <=991 ========================================================= */ @media(max-width:991px){ #CEOJA_BNC_HomeAreas_V1{ padding:5%; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_header{ max-width:1200px; text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_kicker{ width:fit-content; margin-left:auto; margin-right:auto; text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_kicker::before, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_kicker::after{ display:none; } #CEOJA_BNC_HomeAreas_V1 h2{ max-width:1200px; margin-left:auto; margin-right:auto; font-size:40px; text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_header p{ max-width:1000px; text-align:justify; text-align-last:center; } /* ======================================================= COUNTY SWIPE ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyNav{ display:flex; width:100%; gap:10px; padding: 3px 3px 11px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:3px; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:auto; -webkit-overflow-scrolling:touch; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyNav::-webkit-scrollbar{ display:none; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTab{ flex: 0 0 calc((100% - 10px) / 2); width: calc((100% - 10px) / 2); min-width: calc((100% - 10px) / 2); scroll-snap-align:start; scroll-snap-stop:always; } /* ======================================================= STAGE ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_stage{ grid-template-columns:1fr; min-height:0; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationPanel{ border-right:0; border-bottom: 1px solid rgba(14,15,14,.12); } /* ======================================================= CENTER TABLET CONTENT ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationTitle{ text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationLabel, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyName{ text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityHeading{ align-items:center; text-align:center; } /* ======================================================= CITY SWIPE ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityGrid{ display:flex; width:100%; gap:10px; padding: 3px 3px 11px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:3px; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:auto; -webkit-overflow-scrolling:touch; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityGrid::-webkit-scrollbar{ display:none; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:nth-child(4), #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:nth-child(5){ grid-column:auto; flex: 0 0 calc((100% - 10px) / 2); width: calc((100% - 10px) / 2); min-width: calc((100% - 10px) / 2); min-height:66px; scroll-snap-align:start; scroll-snap-stop:always; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_mapColumn{ min-height:500px; scroll-margin-top:16px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_map{ min-height:420px; } } /* ========================================================= MOBILE <=640 ========================================================= */ @media(max-width:640px){ #CEOJA_BNC_HomeAreas_V1{ padding:5%; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_header{ margin-bottom:26px; } #CEOJA_BNC_HomeAreas_V1 h2{ font-size:32px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_header p{ font-size:15px; line-height:1.75; text-align:justify; text-align-last:center; } /* ======================================================= COUNTY SWIPE ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyTab{ flex: 0 0 78%; width:78%; min-width:78%; } /* ======================================================= LOCATION PANEL ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationPanel{ padding: 22px 18px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationTop{ grid-template-columns:1fr; gap:14px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationLabel, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyName{ text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_countyName{ font-size:24px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_showCounty{ width:100%; max-width:420px; margin-inline:auto; } /* ======================================================= CITY HEADING ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityHeading{ margin-top:24px; align-items:center; flex-direction:column; gap:4px; text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityHeading > span, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_cityHeading small{ text-align:center; } /* ======================================================= CITY SWIPE ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:nth-child(4), #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:nth-child(5){ flex: 0 0 78%; width:78%; min-width:78%; min-height:64px; padding: 10px 12px; font-size:14px; } /* ======================================================= CURRENT SELECTION ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_currentSelection{ flex-direction:column; align-items:center; gap:4px; text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_currentSelectionLabel, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_currentSelectionName{ text-align:center; } /* ======================================================= INFO ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_infoBar{ align-items:center; flex-direction:column; gap:8px; font-size:13px; text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_infoBar span{ justify-content:center; text-align:center; } /* ======================================================= MAP ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_mapColumn{ min-height:0; scroll-margin-top:12px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_map{ min-height:340px; } /* ======================================================= DESTINATION CTA ======================================================= */ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCTA{ grid-template-columns: minmax(0,1fr) 46px; min-height:86px; padding: 14px 15px; gap:12px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCopy{ text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCopy small{ font-size:10px; text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationCopy strong{ font-size:15px; text-align:center; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_destinationIcon{ width:44px; height:44px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:420px){ #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_locationPanel{ padding: 20px 15px; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city, #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:nth-child(4), #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_city:nth-child(5){ flex-basis:84%; width:84%; min-width:84%; } #CEOJA_BNC_HomeAreas_V1 .CEOJA_BNCHA1_map{ min-height:310px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ #CEOJA_BNC_HomeAreas_V1 *, #CEOJA_BNC_HomeAreas_V1 *::before, #CEOJA_BNC_HomeAreas_V1 *::after{ transition:none !important; scroll-behavior:auto !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-64b01ec */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Poppins:wght@700&display=swap'); /* ========================================================= ROOT — DARK PREMIUM BACKGROUND ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4{ --lhd-black:#050505; --lhd-red:#911611; --lhd-red-bright:#c72c26; --lhd-white:#ffffff; --lhd-logo-dark:#656b72; --lhd-logo-mid:#777e86; --lhd-logo-light:#878e95; position:relative; isolation:isolate; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:5% !important; overflow:hidden; color:#ffffff; font-family: 'Montserrat', Arial, sans-serif; background: radial-gradient( ellipse at 8% 5%, rgba(145,22,17,.35), transparent 34% ), radial-gradient( ellipse at 95% 90%, rgba(145,22,17,.23), transparent 36% ), linear-gradient( 135deg, #1a0807 0%, #101011 34%, #08090b 68%, #160706 100% ); } #CEOJA_LHD_DirectoryLoop_V4 *, #CEOJA_LHD_DirectoryLoop_V4 *::before, #CEOJA_LHD_DirectoryLoop_V4 *::after{ box-sizing:border-box; min-width:0; } #CEOJA_LHD_DirectoryLoop_V4 img{ display:block; max-width:100%; } /* ========================================================= BACKGROUND DECORATION ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4::before{ content:""; position:absolute; z-index:0; width:min(850px,85vw); height:420px; top:-180px; left:50%; transform: translateX(-50%) rotate(-7deg); border: 1px solid rgba(255,255,255,.045); border-radius:50%; pointer-events:none; } #CEOJA_LHD_DirectoryLoop_V4::after{ content:""; position:absolute; z-index:0; left:5%; right:5%; bottom:12%; height:1px; background: linear-gradient( 90deg, transparent, rgba(199,44,38,.45), rgba(255,255,255,.08), rgba(199,44,38,.45), transparent ); pointer-events:none; } /* ========================================================= INNER ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_inner{ position:relative; z-index:2; width:100%; max-width:100%; margin:0 auto; } /* ========================================================= HEADER ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_header{ width:100%; max-width:1200px; margin: 0 auto clamp(30px,4vw,55px); text-align:center; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_kicker{ display:block; width:100%; max-width:1200px; margin:0 auto 10px; color:#ffffff; font-size:12px; line-height:1.4; font-weight:700; letter-spacing:.16em; text-align:center; text-transform:uppercase; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_header h2{ width:100%; max-width:1200px; margin:0 auto; color:#ffffff; font-family: 'Poppins', Arial, sans-serif; font-size:48px; line-height:1.12; font-weight:700; letter-spacing:-.03em; text-align:center; } /* ========================================================= CAROUSEL VIEWPORT ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_viewport{ position:relative; width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; padding:13px 0 19px; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 4%, #000 96%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 4%, #000 96%, transparent 100% ); } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_viewport::-webkit-scrollbar{ display:none; } /* ========================================================= TRACK AND GROUP ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_track{ display:flex; width:max-content; align-items:stretch; gap:18px; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_group{ display:flex; flex:0 0 auto; align-items:stretch; gap:18px; } /* ========================================================= OUTER CARD — PREMIUM DARK FRAME ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card{ position:relative; isolation:isolate; display:flex; flex: 0 0 clamp(245px,20vw,315px); width: clamp(245px,20vw,315px); min-height:165px; padding:13px; align-items:center; justify-content:center; overflow:hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 25px 8px 25px 8px; text-decoration:none; background: linear-gradient( 145deg, #292a2d 0%, #1c1d20 45%, #111215 100% ); box-shadow: 0 18px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10); transform:translateZ(0); transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); } /* ========================================================= MINIMAL ACCENT LINE ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card::before{ content:""; position:absolute; z-index:3; left:18px; bottom:0; width:50px; height:3px; border-radius:3px 3px 0 0; background: linear-gradient( 90deg, var(--lhd-red), var(--lhd-red-bright) ); box-shadow: 0 0 14px rgba(199,44,38,.20); transition: width .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; } /* ========================================================= VERY SOFT OUTER REFLECTION ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card::after{ content:""; position:absolute; z-index:0; top:-80px; right:-100px; width:220px; height:180px; border-radius:50%; background: radial-gradient( ellipse, rgba(255,255,255,.085), transparent 68% ); pointer-events:none; } /* ========================================================= LOGO PANEL — BALANCED CONTRAST Medium neutral slate: - White logos remain visible. - Black logos remain visible. - Brand colors retain their identity. ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_logo{ position:relative; isolation:isolate; z-index:2; display:flex; width:100%; min-height:132px; padding:20px 24px; align-items:center; justify-content:center; overflow:hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 17px 5px 17px 5px; background-color:#777e86; background-image: radial-gradient( ellipse at 50% 42%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 40%, transparent 75% ), linear-gradient( 145deg, var(--lhd-logo-light) 0%, var(--lhd-logo-mid) 46%, var(--lhd-logo-dark) 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.14), 0 7px 20px rgba(0,0,0,.18); transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease; } /* ========================================================= SUBTLE SURFACE LIGHT ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_logo::before{ content:""; position:absolute; z-index:0; inset:0; border-radius:inherit; background: linear-gradient( 115deg, rgba(255,255,255,.09) 0%, transparent 35%, transparent 68%, rgba(0,0,0,.045) 100% ); pointer-events:none; } /* ========================================================= LOGO IMAGE — ORIGINAL COLOR ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_logo img{ position:relative; z-index:2; display:block; width:auto; max-width:88%; height:auto; max-height:70px; object-fit:contain; object-position:center; opacity:1; filter: drop-shadow( 0 2px 3px rgba(0,0,0,.14) ); transform:scale(1); transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease; } /* ========================================================= HOVER — ELEGANT, NO LARGE MOVEMENT ========================================================= */ @media (hover:hover) and (pointer:fine){ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card:hover{ border-color: rgba(199,44,38,.48); background: linear-gradient( 145deg, #342527 0%, #211d20 45%, #121315 100% ); box-shadow: 0 23px 44px rgba(0,0,0,.33), 0 0 0 1px rgba(199,44,38,.09), inset 0 1px 0 rgba(255,255,255,.11); } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card:hover::before{ width:calc(100% - 36px); box-shadow: 0 0 17px rgba(199,44,38,.36); } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card:hover .CEOJA_LHDDL4_logo{ border-color: rgba(255,255,255,.38); background-color:#81868d; background-image: radial-gradient( ellipse at 50% 42%, rgba(255,255,255,.12), transparent 72% ), linear-gradient( 145deg, #92979e 0%, #82878e 48%, #70757d 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 8px 23px rgba(0,0,0,.22); } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card:hover .CEOJA_LHDDL4_logo img{ transform:scale(1.055); filter: drop-shadow( 0 3px 5px rgba(0,0,0,.17) ); } } /* ========================================================= KEYBOARD ACCESSIBILITY ========================================================= */ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card:focus-visible{ outline:3px solid #ffffff; outline-offset:4px; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card:focus-visible .CEOJA_LHDDL4_logo{ border-color:#ffffff; } /* ========================================================= TABLET ========================================================= */ @media (min-width:641px) and (max-width:1229px){ #CEOJA_LHD_DirectoryLoop_V4{ padding:5% !important; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_header{ margin-bottom:32px; text-align:center; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_header h2{ font-size:40px; text-align:center; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card{ flex-basis: clamp(250px,36vw,330px); width: clamp(250px,36vw,330px); } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_logo{ min-height:125px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:640px){ #CEOJA_LHD_DirectoryLoop_V4{ padding:5% !important; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_header{ margin-bottom:26px; text-align:center; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_kicker{ font-size:10px; text-align:center; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_header h2{ font-size:32px; text-align:center; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_viewport{ padding:8px 0 14px; -webkit-mask-image: linear-gradient( 90deg, transparent, #000 3%, #000 97%, transparent ); mask-image: linear-gradient( 90deg, transparent, #000 3%, #000 97%, transparent ); } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_track, #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_group{ gap:12px; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card{ flex:0 0 78vw; width:78vw; min-height:150px; padding:11px; border-radius: 22px 7px 22px 7px; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_logo{ min-height:124px; padding:18px 21px; border-radius: 15px 5px 15px 5px; } #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_logo img{ max-width:86%; max-height:63px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card, #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_card::before, #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_logo, #CEOJA_LHD_DirectoryLoop_V4 .CEOJA_LHDDL4_logo img{ transition:none !important; } }/* End custom CSS */