/* ========================================================= OCIA HOME INDEX MP LAYOUT 3 — REVOLUTION INTEGRATION ========================================================= */ /* ========================================================= 1. PAGE ========================================================= */ body.ocia-home-v2 { margin: 0; } /* ========================================================= 2. HERO ========================================================= */ body.ocia-home-v2 #home { position: relative; overflow: hidden; } body.ocia-home-v2 #home .rev_slider_wrapper, body.ocia-home-v2 #home .rev_slider { } /* ========================================================= 3. OCIA API EYEBROW --------------------------------------------------------- Layout 3 has only: title + description + CTA. Keep backend eyebrow available but do not display it in this donor architecture. ========================================================= */ body.ocia-home-v2 #home .ocia-home-slide__eyebrow { display: none !important; } /* ========================================================= 4. READABILITY --------------------------------------------------------- The donor demo used photographs selected specifically for white text. OCIA backend images vary, so add only a restrained gradient for readability. ========================================================= */ body.ocia-home-v2 #home .tp-revslider-slidesli::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 42%, rgba(0,0,0,.04) 78% ), linear-gradient( 0deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 50% ); } /* ========================================================= 5. LAYERS ========================================================= */ body.ocia-home-v2 #home .ocia-home-slide__title, body.ocia-home-v2 #home .ocia-home-slide__body, body.ocia-home-v2 #home .ocia-home-slide__cta { z-index: 6 !important; } body.ocia-home-v2 #home .ocia-home-slide__title { color: #fff !important; font-weight: 700 !important; text-shadow: 0 3px 18px rgba(0,0,0,.28); } body.ocia-home-v2 #home .ocia-home-slide__body { color: rgba(255,255,255,.90) !important; font-weight: 400 !important; } /* ========================================================= 6. CTA --------------------------------------------------------- Keep Layout 3's original button language. ========================================================= */ body.ocia-home-v2 #home .ocia-home-slide__cta { cursor: pointer; text-decoration: none !important; } /* ========================================================= 7. MOBILE READABILITY ========================================================= */ @media only screen and (max-width: 767px) { body.ocia-home-v2 #home .tp-revslider-slidesli::before { background: linear-gradient( 0deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.08) 100% ); } } /* ========================================================= OCIA HOME — LAYOUT 3 CTA POLISH ========================================================= */ body.ocia-home-v2 #home .ocia-home-slide__cta { display: inline-block !important; padding: 12px 30px !important; border: 2px solid #f4b63b !important; border-radius: 0 !important; background: rgba(0, 0, 0, .18) !important; color: #ffffff !important; font-family: "Open Sans", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 22px !important; letter-spacing: .05em !important; text-transform: uppercase !important; text-decoration: none !important; transition: background .25s ease, color .25s ease, border-color .25s ease !important; } body.ocia-home-v2 #home .ocia-home-slide__cta:hover, body.ocia-home-v2 #home .ocia-home-slide__cta:focus { border-color: #f4b63b !important; background: #f4b63b !important; color: #111111 !important; } /* ========================================================= OCIA HOME — LAYOUT 3 TYPOGRAPHY POLISH ========================================================= */ body.ocia-home-v2 #home .ocia-home-slide__title { color: #ffffff !important; font-family: "Raleway", sans-serif !important; font-weight: 800 !important; letter-spacing: -.025em !important; text-shadow: 0 3px 18px rgba(0,0,0,.30); } body.ocia-home-v2 #home .ocia-home-slide__body { color: rgba(255,255,255,.92) !important; font-family: "Open Sans", sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; overflow: visible !important; } /* ========================================================= OCIA HOME — LAYOUT 3 CTA ========================================================= */ body.ocia-home-v2 #home .ocia-home-slide__cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; padding: 11px 30px !important; border: 2px solid #f4b63b !important; border-radius: 0 !important; background: rgba(0,0,0,.16) !important; color: #ffffff !important; font-family: "Open Sans", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 22px !important; letter-spacing: .055em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; transition: background-color .25s ease, border-color .25s ease, color .25s ease !important; } body.ocia-home-v2 #home .ocia-home-slide__cta:hover, body.ocia-home-v2 #home .ocia-home-slide__cta:focus { border-color: #f4b63b !important; background: #f4b63b !important; color: #111111 !important; } /* ========================================================= OCIA HOME — INTRO / UMBRELLA PARTNER SECTION ========================================================= */ body.ocia-home-v2 .ocia-home-intro { position: relative; padding: 90px 0 125px; background: #ffffff; color: #111111; overflow: hidden; } body.ocia-home-v2 .ocia-home-intro__inner { width: 100%; max-width: 1040px; margin: 0 auto; text-align: center; } /* ========================================================= MAIN BLUE TITLE ========================================================= */ body.ocia-home-v2 .ocia-home-intro__title { margin: 0 0 10px; color: #08a1e2; font-family: "Raleway", sans-serif; font-size: 37px; font-weight: 800; line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; } /* ========================================================= SECONDARY TITLE ========================================================= */ body.ocia-home-v2 .ocia-home-intro__subtitle { margin: 0 0 18px; color: #111111; font-family: "Raleway", sans-serif; font-size: 25px; font-weight: 400; line-height: 1.35; letter-spacing: .01em; text-transform: uppercase; } body.ocia-home-v2 .ocia-home-intro__subtitle strong { margin-left: 6px; font-weight: 800; } /* ========================================================= DESCRIPTION ========================================================= */ body.ocia-home-v2 .ocia-home-intro__description { max-width: 970px; margin: 0 auto 12px; color: #151515; font-family: "Open Sans", sans-serif; font-size: 17px; font-weight: 400; line-height: 1.5; letter-spacing: .01em; text-align: left; } body.ocia-home-v2 .ocia-home-intro__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* ========================================================= PASSION STATEMENT ========================================================= */ body.ocia-home-v2 .ocia-home-intro__passion { margin: 10px 0 18px; color: #ef8b18; font-family: "Raleway", sans-serif; font-size: 23px; font-weight: 500; line-height: 1.4; } /* ========================================================= BUTTON ========================================================= */ body.ocia-home-v2 .ocia-home-intro__button { display: inline-flex; align-items: center; justify-content: center; min-width: 300px; min-height: 80px; padding: 18px 34px; border: 1px solid #000000; border-radius: 0; background: #000000; color: rgba(255,255,255,.78); font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 400; line-height: 1; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } body.ocia-home-v2 .ocia-home-intro__button:hover, body.ocia-home-v2 .ocia-home-intro__button:focus { border-color: #08a1e2; background: #08a1e2; color: #ffffff; text-decoration: none; transform: translateY(-2px); } /* ========================================================= TABLET ========================================================= */ @media only screen and (max-width: 991px) { body.ocia-home-v2 .ocia-home-intro { padding: 75px 0 95px; } body.ocia-home-v2 .ocia-home-intro__inner { max-width: 820px; } body.ocia-home-v2 .ocia-home-intro__title { font-size: 31px; } body.ocia-home-v2 .ocia-home-intro__subtitle { font-size: 21px; } body.ocia-home-v2 .ocia-home-intro__description { font-size: 16px; } body.ocia-home-v2 .ocia-home-intro__passion { font-size: 21px; } } /* ========================================================= MOBILE ========================================================= */ @media only screen and (max-width: 767px) { body.ocia-home-v2 .ocia-home-intro { padding: 58px 0 70px; } body.ocia-home-v2 .ocia-home-intro__inner { padding: 0 5px; } body.ocia-home-v2 .ocia-home-intro__title { margin-bottom: 12px; font-size: 25px; line-height: 1.25; } body.ocia-home-v2 .ocia-home-intro__subtitle { margin-bottom: 20px; font-size: 18px; line-height: 1.45; } body.ocia-home-v2 .ocia-home-intro__subtitle span, body.ocia-home-v2 .ocia-home-intro__subtitle strong { display: block; margin: 0; } body.ocia-home-v2 .ocia-home-intro__description { font-size: 15px; line-height: 1.65; text-align: left; } body.ocia-home-v2 .ocia-home-intro__passion { margin-top: 18px; font-size: 19px; } body.ocia-home-v2 .ocia-home-intro__button { min-width: 250px; min-height: 62px; padding: 15px 28px; } } /* ========================================================= SMALL PHONE ========================================================= */ @media only screen and (max-width: 479px) { body.ocia-home-v2 .ocia-home-intro__title { font-size: 22px; } body.ocia-home-v2 .ocia-home-intro__subtitle { font-size: 16px; } body.ocia-home-v2 .ocia-home-intro__passion { font-size: 18px; } body.ocia-home-v2 .ocia-home-intro__button { width: 100%; min-width: 0; } }