/* ================= BO WHY STRIP WIDGET — default styling ================= Scoped under .bo-why-wrap. Reproduces .why-section / .why-inner / .why-features exactly, with added responsive breakpoints (the original had none — this widget adds 980px/640px steps consistent with the rest of the site). ========================================================================= */ .bo-why-wrap{ --why-navy: #031B39; --why-accent: #1083E6; --why-accent-soft: #BFE0FB; --why-panel-bg: #031B39; --why-section-bg: #F7F9FC; --why-ease: cubic-bezier(.22,1,.36,1); font-family:'Roboto', sans-serif; } .bo-why-wrap .why-section{ padding:80px 0; background:var(--why-section-bg); } .bo-why-wrap .why-wrap{ max-width:1220px; margin:0 auto; padding:0 40px; } .bo-why-wrap .why-inner{ background:var(--why-panel-bg); border-radius:20px; padding:54px 56px; position:relative; overflow:hidden; display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; } .bo-why-wrap .why-inner::before{ content:''; position:absolute; top:-60%; right:-10%; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(16,131,230,.18), transparent 70%); pointer-events:none; } /* ---------- Header ---------- */ .bo-why-wrap .why-header{ position:relative; z-index:1; } .bo-why-wrap .why-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--why-accent-soft); font-weight:500; display:flex; align-items:center; gap:10px; margin-bottom:16px; } .bo-why-wrap .why-eyebrow::before{ content:''; width:18px; height:1px; background:var(--why-accent-soft); display:inline-block; } .bo-why-wrap .why-header .why-heading-tag{ font-family:'Roboto Slab', serif; font-weight:500; letter-spacing:-0.01em; line-height:1.2; font-size:30px; color:#fff; margin:0; } /* ---------- Features grid ---------- */ .bo-why-wrap .why-features{ display:grid; grid-template-columns:1fr 1fr; gap:0; position:relative; z-index:1; } .bo-why-wrap .why-feat{ padding:24px 28px; border-bottom:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08); transition:background .3s var(--why-ease); } .bo-why-wrap .why-feat:nth-child(2n){ border-right:none; } .bo-why-wrap .why-feat:nth-child(3), .bo-why-wrap .why-feat:nth-child(4){ border-bottom:none; } .bo-why-wrap .why-feat:hover{ background:rgba(255,255,255,.04); } .bo-why-wrap .wf-num{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.14em; color:var(--why-accent); margin-bottom:10px; font-weight:500; } .bo-why-wrap .why-feat h4{ font-family:'Roboto', sans-serif; font-size:15px; font-weight:600; color:#fff; margin-bottom:8px; letter-spacing:0; } .bo-why-wrap .why-feat p{ font-size:13px; color:rgba(255,255,255,.55); line-height:1.6; margin:0; } /* ---------- Reveal helper ---------- */ .bo-why-wrap .reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .8s var(--why-ease), transform .9s cubic-bezier(.34,1.56,.64,1); } .bo-why-wrap .reveal-scale.in{ opacity:1; transform:scale(1); } @media (prefers-reduced-motion: reduce){ .bo-why-wrap .reveal-scale{ opacity:1; transform:none; transition:none; } } /* ---------- Editor-active safety net ---------- Elementor adds this class to the preview iframe so plugins can force-show scroll-reveal content while editing, independent of any JS timing race. */ body.elementor-editor-active .bo-why-wrap .reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important; } /* ================= RESPONSIVE ================= */ @media (max-width:980px){ .bo-why-wrap .why-inner{ grid-template-columns:1fr; padding:44px 40px; gap:36px; } } @media (max-width:640px){ .bo-why-wrap .why-wrap{ padding:0 20px; } .bo-why-wrap .why-section{ padding:56px 0; } .bo-why-wrap .why-inner{ padding:32px 24px; border-radius:16px; } .bo-why-wrap .why-header h2{ font-size:24px; } .bo-why-wrap .why-features{ grid-template-columns:1fr; } .bo-why-wrap .why-feat{ border-right:none !important; padding:20px 4px; } .bo-why-wrap .why-feat:nth-child(4){ border-bottom:none; } .bo-why-wrap .why-feat:last-child{ border-bottom:none; } }