/* ================= BO SERVICES INTRO WIDGET — default styling ================= Scoped under .bo-si-wrap. Self-contained: own CSS vars, own class names, own reveal system. Does not depend on theme globals (.wrap, .eyebrow, :root vars like --navy/--blue) so it renders correctly even without the parent theme stylesheet loaded. ========================================================================= */ .bo-si-wrap{ --si-navy: #031B39; --si-blue: #1083E6; --si-slate: #54627A; --si-bg: #F7F9FC; --si-line: #E4E8EE; --si-line-strong: #D6DCE5; --si-ease: cubic-bezier(.22,1,.36,1); --si-pad-top: 144px; --si-pad-bottom: 80px; --si-accent: #1083E6; font-family:'Roboto', sans-serif; } .bo-si-wrap .bo-si-section{ padding:var(--si-pad-top) 0 var(--si-pad-bottom); background:var(--si-bg); border-bottom:1px solid var(--si-line); position:relative; overflow:hidden; } .bo-si-wrap .bo-si-section.bo-si-has-bar::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--si-navy) 0%, var(--si-accent) 60%, transparent 100%); } .bo-si-wrap .bo-si-inner{ max-width:1220px; margin:0 auto; padding:0 40px; } .bo-si-wrap .si-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; } /* ---------- Left column ---------- */ .bo-si-wrap .si-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--si-accent); font-weight:500; display:flex; align-items:center; gap:10px; margin-bottom:18px; } .bo-si-wrap .si-eyebrow::before{ content:''; width:18px; height:1px; background:var(--si-accent); display:inline-block; } .bo-si-wrap .si-left h1{ font-family:'Roboto Slab', serif; font-size:44px; font-weight:500; line-height:1.08; letter-spacing:-.02em; color:var(--si-navy); } .bo-si-wrap .si-left h1 em{ font-style:italic; font-weight:400; color:var(--si-accent); } /* ---------- Right column ---------- */ .bo-si-wrap .si-right p{ font-size:15.5px; color:var(--si-slate); line-height:1.65; max-width:460px; margin-bottom:28px; } .bo-si-wrap .si-pills{ display:flex; gap:10px; flex-wrap:wrap; } .bo-si-wrap .si-pill{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--si-navy); background:var(--si-bg); border:1px solid var(--si-line-strong); border-radius:999px; padding:6px 14px; font-weight:500; transition:all .3s var(--si-ease); cursor:default; } .bo-si-wrap .si-pill:hover{ border-color:var(--si-accent); color:var(--si-accent); background:#fff; } /* ---------- Reveal (self-contained) ---------- */ .bo-si-wrap .bo-si-reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--si-ease), transform .8s var(--si-ease); } .bo-si-wrap .bo-si-reveal.bo-si-in{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .bo-si-wrap .bo-si-reveal{ opacity:1; transform:none; transition:none; } } /* Elementor editor safety net — Elementor adds this class to the preview iframe's while editing. Without this override, the reveal animation's opacity:0 starting state can get stuck (observer doesn't fire reliably inside the editor), making the widget look blank. */ body.elementor-editor-active .bo-si-wrap .bo-si-reveal{ opacity:1 !important; transform:none !important; } /* ================= RESPONSIVE ================= */ @media (max-width:980px){ .bo-si-wrap .si-grid{ grid-template-columns:1fr; gap:28px; } .bo-si-wrap .si-left h1{ font-size:34px; } } @media (max-width:640px){ .bo-si-wrap .bo-si-inner{ padding:0 20px; } .bo-si-wrap .si-left h1{ font-size:28px; } }