/* * Site header. * * Extracted from the source file's two style blocks during migration. The rules * are the source rules; only their home is new, and the comments — which carry * the reasoning behind the v5.1 and v5.2 fixes — are in English. * * The first block is a hard reset that shields the header from theme and * Elementor styles, repeated once for the drawer because the script moves the * drawer out of the header and into the body. */ /* ===== HARD RESET: protect header from theme/Elementor styles ===== */ .fbh button{all:unset;box-sizing:border-box;cursor:pointer} .fbh a,.fbh a:hover{text-decoration:none!important; box-shadow:none!important;border-bottom-width:0;outline:none} .fbh p{margin:0!important} .fbh img{border:none;box-shadow:none} .fbh svg{display:inline-block;vertical-align:middle} .fbh{font-size:16px;line-height:1.5;letter-spacing:normal;text-transform:none} .fbh .item,.fbh-link,.fbh-cta{white-space:nowrap!important} .fbh ul,.fbh li{list-style:none;margin:0;padding:0} /* The script moves the drawer into , so it is no longer a descendant of .fbh and every reset rule above has to be repeated for it. Without them the theme's button padding squeezes the drawer's icons to zero width. */ .fbh-mob button{all:unset;box-sizing:border-box;cursor:pointer} .fbh-mob a,.fbh-mob a:hover{text-decoration:none!important; box-shadow:none!important;border-bottom-width:0;outline:none} .fbh-mob p{margin:0!important} .fbh-mob img{border:none;box-shadow:none} .fbh-mob svg{display:inline-block;vertical-align:middle} .fbh-mob *{box-sizing:border-box;margin:0;padding:0} .fbh-mob{font-family:'Inter','Segoe UI',system-ui,sans-serif; font-size:16px;line-height:1.5;letter-spacing:normal;text-transform:none; -webkit-font-smoothing:antialiased} .fbh-mob a:focus-visible,.fbh-mob button:focus-visible{ outline:2px solid #0B87D0!important;outline-offset:3px;border-radius:10px} /* The keyboard focus ring. :focus-visible keeps it off mouse clicks. */ .fbh a:focus-visible,.fbh button:focus-visible{ outline:2px solid #0B87D0!important;outline-offset:3px;border-radius:10px} .fbh-top a:focus-visible{outline-color:#7FD6FF!important} /* ============================================================ v5.1 FIX A — STICKY ENVIRONMENT position:sticky fails silently under any ancestor with overflow set to hidden, auto or scroll. overflow-x:clip does the same job of stopping sideways scroll without making a scroll container. ============================================================ */ html{overflow-x:clip} body{overflow-x:clip} #page,.site,.ast-container,#content,.site-content, .ast-page-builder-template #content{overflow:visible!important} /* ============================================================ v5.2 FIX C — WP ADMIN BAR OFFSET The admin bar is itself position:fixed, so a logged-in visitor had the header sitting behind it. WordPress marks such a page with the "admin-bar" class on . Below 600px the admin bar turns position:absolute and scrolls away, so the offset there is zero. ============================================================ */ .fbh{--fbh-adminbar:0px} body.admin-bar .fbh{--fbh-adminbar:32px} @media screen and (max-width:782px){body.admin-bar .fbh{--fbh-adminbar:46px}} @media screen and (max-width:600px){body.admin-bar .fbh{--fbh-adminbar:0px}} /* JS fallback: agar sticky phir bhi fail ho to fixed mode */ .fbh.fbh-fixed{position:fixed!important;top:var(--fbh-adminbar,0px);left:0;right:0;width:100%} /* In fixed mode the top bar is hidden with a transform. A negative top would do nothing here, because a fixed element stays where it is put. */ .fbh.fbh-fixed.scrolled{transform:translateY(calc(-1 * var(--fbh-topbar,44px)))} .fbh.fbh-fixed.scrolled.hidden{transform:translateY(-100%)} /* The variables are declared on :root as well. The drawer is moved into the body, and without this var(--fbh-blue) resolves to nothing there and the icons lose their stroke. */ :root{--fbh-navy:#03123E;--fbh-blue:#0066CC;--fbh-cyan:#2EB0E7;--fbh-ink:#182238} .fbh{ --fbh-max:1360px; /* the width both bars share */ --fbh-pad:28px; /* the side padding both bars share — change it in this one place */ --fbh-h:76px; /* main bar height */ --fbh-navy:#03123E;--fbh-blue:#0066CC;--fbh-cyan:#2EB0E7;--fbh-ink:#182238; --fbh-topbar:44px; /* the top bar's height, which the script measures live */ /* v5.2 FIX D: a negative sticky offset lets the top bar scroll away and leaves only the main bar stuck to the top, under the admin bar. */ position:-webkit-sticky;position:sticky; top:calc(var(--fbh-adminbar,0px) - var(--fbh-topbar,44px)); z-index:9999;width:100%; font-family:'Inter','Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased; transition:transform .38s cubic-bezier(.4,0,.2,1)} .fbh.hidden{transform:translateY(-100%)} /* OPTIONAL: to keep the header visible while scrolling down as well, uncomment the line below. That turns the smart-sticky behaviour off. */ /* .fbh.hidden{transform:none!important} */ /* NOTE: this has to be "none" rather than translateY(0). Any transform value at all, zero included, makes the element a containing block for its fixed children, which breaks the drawer's full-screen scrim. will-change was removed for the same reason. */ .fbh.mopen{transform:none!important} .fbh:not(.fbh-fixed):hover{transform:none} .fbh *{box-sizing:border-box;margin:0;padding:0} .fbh b,.fbh .fbh-cta,.fbh .colh{font-family:'IBM Plex Sans','Inter',sans-serif} .fbh a{text-decoration:none} /* ===== ALIGNMENT: one wrap definition serving both bars ===== */ .fbh .wrap{max-width:var(--fbh-max);margin:0 auto;padding:0 var(--fbh-pad);width:100%} /* Keeps an anchor link's target from landing under the header. Since v5.2 only the main bar is sticky, so the offset is smaller than it was. */ html{scroll-padding-top:96px} /* the script overwrites this with the measured value */ @media(max-width:560px){html{scroll-padding-top:84px}} /* ================= TOP BAR ================= */ .fbh-top{background:linear-gradient(100deg,#03123E,#042B6D 55%,#05489B);color:#fff; position:relative;overflow:hidden} .fbh-top::before{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none; background-image:repeating-linear-gradient(112deg,transparent 0 46px,rgba(46,176,231,.9) 46px 47px)} .fbh-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(46,176,231,.55),transparent)} .fbh-top .wrap{position:relative;display:flex;align-items:center;justify-content:space-between; gap:16px;height:44px} .fbh-top .l,.fbh-top .r{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;min-width:0} .fbh-top .item{display:inline-flex!important;flex-direction:row!important;align-items:center!important; gap:8px;font-size:13px!important;color:rgba(255,255,255,.88)!important;transition:.2s; line-height:1!important;white-space:nowrap!important;flex-wrap:nowrap!important;letter-spacing:.01em} .fbh-top .item:hover{color:#7FD6FF!important} .fbh-top .item svg{width:14px!important;height:14px!important;min-width:14px!important; flex:0 0 14px!important;display:inline-block!important;vertical-align:middle!important; stroke:#2EB0E7;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.2s} .fbh-top .item:hover svg{stroke:#7FD6FF} .fbh-top .sep{width:1px;height:18px;background:rgba(255,255,255,.2);flex:0 0 1px} /* ---- CAREERS PORTAL PILL (highlight) ---- */ .fbh-careers{display:inline-flex!important;align-items:center;gap:9px;height:30px; padding:0 14px 0 12px;border-radius:100px;flex:0 0 auto; background:linear-gradient(95deg,rgba(46,176,231,.22),rgba(46,176,231,.06)); border:1px solid rgba(127,214,255,.42); font-size:12.5px!important;font-weight:600;letter-spacing:.02em; color:#EAF7FF!important;transition:.28s cubic-bezier(.2,.7,.3,1);white-space:nowrap} .fbh-careers .dot{width:7px;height:7px;border-radius:50%;background:#3DDC97;flex:0 0 7px; animation:fbhPulse 2.2s ease-out infinite} @keyframes fbhPulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.65)} 70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}} .fbh-careers svg{width:12px;height:12px;stroke:#7FD6FF;fill:none;stroke-width:2.3; stroke-linecap:round;stroke-linejoin:round;transition:.25s} .fbh-careers:hover{background:linear-gradient(95deg,#2EB0E7,#0B87D0);border-color:transparent; color:#fff!important;box-shadow:0 6px 18px rgba(46,176,231,.42);transform:translateY(-1px)} .fbh-careers:hover svg{stroke:#fff;transform:translateX(3px)} .fbh-careers:hover .dot{background:#fff} /* ---- SOCIALS ---- */ .fbh-top .socials{display:flex;gap:6px;margin-right:-7px} /* -7px = optical edge align */ .fbh-top .socials a{width:32px;height:32px;border-radius:9px;display:flex;align-items:center; justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13); transition:.26s cubic-bezier(.2,.7,.3,1)} .fbh-top .socials svg{width:15px;height:15px;fill:rgba(255,255,255,.78);transition:.26s} .fbh-top .socials a:hover{transform:translateY(-2px);border-color:transparent; box-shadow:0 8px 18px rgba(0,0,0,.32)} .fbh-top .socials a:hover svg{fill:#fff} .fbh-top .socials a.s-li:hover{background:#0A66C2} .fbh-top .socials a.s-fb:hover{background:#1877F2} .fbh-top .socials a.s-ig:hover{background:linear-gradient(45deg,#F9CE34,#EE2A7B 55%,#6228D7)} .fbh-top .socials a.s-x:hover{background:#0B0B0B} .fbh-top .socials a.s-yt:hover{background:#FF0033} /* ================= MAIN BAR (glass on scroll) ================= */ .fbh-main{position:relative;background:rgba(255,255,255,.97);border-bottom:1px solid #E8EEF6; transition:box-shadow .35s,backdrop-filter .35s,background .35s} .fbh.scrolled .fbh-main{background:rgba(255,255,255,.88); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 10px 34px rgba(4,24,83,.11)} /* scroll progress line */ .fbh-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;z-index:6;pointer-events:none; background:linear-gradient(90deg,#2EB0E7,#0066CC 60%,#7B4DD8); box-shadow:0 0 10px rgba(46,176,231,.55);border-radius:0 2px 2px 0; opacity:0;transition:opacity .3s} .fbh.scrolled .fbh-prog{opacity:1} /* ===== overlap-proof 3-column grid (logo | nav | actions) ===== */ .fbh-main .wrap{display:grid!important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;height:var(--fbh-h);gap:18px} .fbh-logo{justify-self:start;min-width:0} .fbh-nav{justify-self:center;min-width:0} .fbh-actions{justify-self:end} .fbh-logo{display:flex;align-items:center;gap:13px;flex:0 0 auto} .fbh-logo img{height:48px;width:auto;max-width:70px;object-fit:contain;display:block;transition:.3s} .fbh-logo .lsep{width:1px;height:34px;flex:0 0 1px; background:linear-gradient(180deg,transparent,#D6E2F0 45%,transparent)} .fbh.scrolled .fbh-logo img{height:42px} .fbh.scrolled .fbh-logotxt b{font-size:19px!important} /* logo lockup: image + animated-gradient name + slogan */ .fbh-logotxt{display:flex!important;flex-direction:column;line-height:1.05} @keyframes fbhNameFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}} .fbh-logotxt b{font-family:'IBM Plex Sans',sans-serif!important;font-size:21px!important;font-weight:700!important; letter-spacing:.015em;white-space:nowrap;line-height:1.1!important; background-image:linear-gradient(90deg,#0066CC,#2EB0E7,#7B4DD8,#E0318A,#F5A623,#2ECFA8,#0066CC,#2EB0E7,#7B4DD8,#E0318A,#F5A623,#2ECFA8,#0066CC)!important; background-size:200% 100%!important;background-repeat:repeat!important; -webkit-background-clip:text!important;background-clip:text!important; -webkit-text-fill-color:transparent!important;-webkit-text-stroke:0!important;color:transparent!important; animation:fbhNameFlow 9s linear infinite!important;will-change:background-position} .fbh-logotxt small{font-size:8.8px;font-weight:600;letter-spacing:.26em; text-transform:uppercase;color:#7C8CA5!important;margin-top:5px;white-space:nowrap} @media(prefers-reduced-motion:reduce){ .fbh-logotxt b{animation:none}.fbh-careers .dot{animation:none}.fbh{transition:none}} /* NAV */ .fbh-nav{display:flex;align-items:center;gap:2px;justify-content:center;max-width:100%} .fbh-item{position:relative} .fbh-link{position:relative;display:flex!important;align-items:center;gap:6px;padding:27px 13px!important;cursor:pointer; font-size:14.5px!important;font-weight:600;color:var(--fbh-ink)!important;background:transparent!important;border:none!important; box-shadow:none!important;border-radius:0!important;font-family:'Inter',sans-serif!important;transition:color .2s;white-space:nowrap;line-height:1.4!important} .fbh-link .ch{width:12px;height:12px;stroke:#8A97AC;fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:.3s} .fbh-link::after{content:"";position:absolute;left:13px;right:13px;bottom:18px;height:2.5px; border-radius:2px;background:linear-gradient(90deg,#2EB0E7,#0066CC); transform:scaleX(0);transform-origin:left;transition:.32s cubic-bezier(.2,.7,.3,1)} .fbh-item:hover .fbh-link,.fbh-item.open .fbh-link{color:var(--fbh-blue)!important;background:transparent!important} .fbh-item:hover .fbh-link::after,.fbh-item.open .fbh-link::after,.fbh-link.active::after{transform:scaleX(1)} .fbh-link.active{color:var(--fbh-blue)!important} .fbh-item:hover .fbh-link .ch,.fbh-item.open .fbh-link .ch{stroke:var(--fbh-blue);transform:rotate(180deg)} /* ================= MEGA PANELS ================= */ html .fbh-mega{display:flex} .fbh-mega{position:absolute;top:100%;left:50%; transform:translate(-50%,14px) scale(.985); background:#fff;border:1px solid #E5ECF5;border-radius:20px; box-shadow:0 34px 80px rgba(4,24,83,.20),0 4px 12px rgba(4,24,83,.05);padding:28px; opacity:0;visibility:hidden;transition:.3s cubic-bezier(.2,.7,.3,1);z-index:50; display:flex;gap:34px} .fbh-mega::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px; border-radius:0 0 6px 6px;background:linear-gradient(90deg,#2EB0E7,#0066CC,#7B4DD8)} /* ---- v5.1 FIX B(a): HOVER BRIDGE ---- The panel sits at top:100% but is nudged down by translateY(6px), which left a 6px dead zone between the bottom of the link and the top of the panel. A slow mouse lost the hover crossing it. This invisible ::after covers the gap. (::before is already taken by the gradient line.) */ .fbh-mega::after{content:"";position:absolute;left:-24px;right:-24px; top:-18px;height:22px;background:transparent} .fbh-item:hover .fbh-mega,.fbh-item.open .fbh-mega{opacity:1;visibility:visible; transform:translate(-50%,6px) scale(1)} /* ---- v5.1 FIX B(b): GRACE PERIOD ---- The script keeps .hold for 260ms after mouseleave, so a diagonal or unhurried movement still reaches the panel. */ .fbh-item.hold>.fbh-mega{opacity:1!important;visibility:visible!important; transform:translate(-50%,6px) scale(1)!important} .fbh-item.hold>.fbh-link{color:var(--fbh-blue)!important} .fbh-item.hold>.fbh-link::after{transform:scaleX(1)} .fbh-item.hold>.fbh-link .ch{stroke:var(--fbh-blue);transform:rotate(180deg)} .fbh-mega.mega-s{min-width:330px;flex-direction:column;gap:2px} .fbh-mega.mega-m{min-width:600px} .fbh-mega.mega-l{min-width:640px} .fbh-mega.mega-xl{min-width:min(960px,calc(100vw - 48px));left:50%;right:auto; transform:translate(-50%,14px) scale(.985)} .fbh-item:hover .fbh-mega.mega-xl,.fbh-item.open .fbh-mega.mega-xl, .fbh-item.hold>.fbh-mega.mega-xl{transform:translate(-50%,6px) scale(1)} .fbh-mega .mg{display:grid;gap:2px 26px;flex:1;min-width:0} .fbh-mega .cols2g{grid-template-columns:1fr 1fr} .fbh-mega .col{min-width:230px;display:flex;flex-direction:column;gap:2px} .fbh-mega .colh{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:#0B87D0;margin-bottom:12px; padding-bottom:10px;border-bottom:1px solid #EDF2F8} .fbh-mega .colh::before{content:"";width:7px;height:7px;border-radius:2px; background:linear-gradient(135deg,#2EB0E7,#0066CC);transform:rotate(45deg)} /* rich links: icon chip + title + description */ .fbh-mega a{display:flex;align-items:flex-start;gap:13px;padding:11px 12px; border-radius:12px;transition:.22s} .fbh-mega a .mic{flex:0 0 38px;width:38px;height:38px;border-radius:10px; background:linear-gradient(135deg,#EFF7FE,#E7F2FC);border:1px solid #DCEAF8; display:flex;align-items:center;justify-content:center;transition:.22s} .fbh-mega a .mic svg{width:18px;height:18px;stroke:#0B87D0;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;transition:.22s} /* `:not(.feat)` keeps these to the link list. The featured card is an `a` too, and the !important below was overriding its own white title. */ .fbh-mega a:not(.feat) b{display:block;font-size:14px!important;font-weight:600;color:#1B2A44!important;line-height:1.3!important; margin-bottom:2px;transition:.22s} .fbh-mega a:not(.feat) small{display:block;font-size:12px;color:#7C8CA5;line-height:1.4} .fbh-mega a:not(.feat):hover{background:#F3F9FF;transform:translateX(2px)} .fbh-mega a:hover .mic{background:linear-gradient(135deg,#2EB0E7,#0066CC);border-color:transparent; box-shadow:0 6px 14px rgba(0,102,204,.25)} .fbh-mega a:hover .mic svg{stroke:#fff} .fbh-mega a:not(.feat):hover b{color:var(--fbh-blue)!important} /* featured card */ .fbh-mega .feat{flex:0 0 250px;display:flex;flex-direction:column;justify-content:flex-end; border-radius:16px;padding:24px 22px;position:relative;overflow:hidden;transition:.25s} /* The picture is an `img` element, chosen per menu item in the panel, so it carries srcset and is not fetched until the menu opens. Two of these were previously hardcoded URLs pointing at the live site, which meant staging pulled them across domains and no one could change them without editing the stylesheet. Stack, bottom to top: image, colour wash, diagonal screen, text. The wash is translucent so it tints a picture, and the base colour underneath means a card with no picture still looks finished rather than transparent. */ .fbh-mega .feat{background-color:var(--feat-base,#03123E)} .fbh-mega .feat .fimg{position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover;object-position:center; border-radius:inherit;transition:transform .5s cubic-bezier(.22,1,.36,1)} .fbh-mega .feat:hover .fimg{transform:scale(1.06)} .fbh-mega .feat::after{content:"";position:absolute;inset:0;z-index:1; background:var(--feat-wash)} .fbh-mega .feat::before{content:"";position:absolute;inset:0;z-index:2;opacity:.12; background-image:repeating-linear-gradient(112deg,transparent 0 34px,rgba(255,255,255,.8) 34px 35px)} .fbh-mega .feat.f-blue{--feat-base:#042B6D; --feat-wash:linear-gradient(160deg,rgba(3,18,62,.74),rgba(4,43,109,.52) 55%,rgba(5,72,155,.44))} .fbh-mega .feat.f-green{--feat-base:#053B33; --feat-wash:linear-gradient(160deg,rgba(5,59,51,.72),rgba(11,158,142,.5) 90%)} .fbh-mega .feat.f-navy{--feat-base:#03123E; --feat-wash:linear-gradient(155deg,rgba(3,18,62,.8),rgba(4,43,109,.58) 52%,rgba(10,95,180,.46))} .fbh-mega .feat>*{position:relative;z-index:3} .fbh-mega .feat>.fimg{z-index:0} .fbh-mega .feat .chip{display:inline-flex;align-items:center;gap:7px;align-self:flex-start; font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0B2A1E; background:#3DDC97;padding:5px 11px;border-radius:100px;margin-bottom:12px} .fbh-mega .feat .chip i{width:6px;height:6px;border-radius:50%;background:#0B2A1E;font-style:normal; animation:fbhPulse 2.2s ease-out infinite} .fbh-mega .feat small{font-size:10.5px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:8px;text-shadow:0 1px 8px rgba(0,0,0,.5)} .fbh-mega .feat b{font-family:'IBM Plex Sans',sans-serif;font-size:18px;font-weight:700; color:#fff;line-height:1.25;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.5)} .fbh-mega .feat p{font-size:12.5px;color:rgba(255,255,255,.92);line-height:1.55;margin-bottom:16px;text-shadow:0 1px 10px rgba(0,0,0,.55)} .fbh-mega .feat .fb{display:inline-flex;align-items:center;gap:7px;align-self:flex-start; font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:600;color:#fff; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3); padding:9px 16px;border-radius:100px;transition:.25s} .fbh-mega .feat .fb svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;transition:.25s} .fbh-mega .feat:hover{transform:translateY(-3px)} .fbh-mega .feat:hover .fb{background:#fff;color:#042B6D} .fbh-mega .feat:hover .fb svg{stroke:#042B6D;transform:translateX(3px)} /* actions cell (right) */ .fbh-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto} /* CTA */ .fbh-cta{flex:0 0 auto;display:inline-flex!important;align-items:center;gap:9px;color:#fff!important; background:linear-gradient(95deg,#0066CC,#0B87D0); font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:100px; box-shadow:0 6px 18px rgba(0,102,204,.28);transition:.25s;position:relative;overflow:hidden} .fbh-cta::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg);transition:.5s} .fbh-cta:hover::before{left:130%} .fbh-cta svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;transition:.25s} .fbh-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,102,204,.42);color:#fff!important} .fbh-cta:hover svg{transform:translateX(3px)} /* BURGER */ .fbh-burger{display:none!important;width:46px!important;height:46px!important;border:1.5px solid #E0E8F2!important;border-radius:12px!important; background:#fff!important;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0!important} .fbh-burger i{display:block!important;width:22px!important;height:2.5px!important;border-radius:2px;background:#042B6D!important;font-style:normal;transition:.3s;margin:0!important} .fbh.mopen .fbh-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} .fbh.mopen .fbh-burger i:nth-child(2){opacity:0} .fbh.mopen .fbh-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ================= OFF-CANVAS MOBILE MENU ================= */ html .fbh-scrim{display:block} .fbh-scrim{position:fixed;inset:0;z-index:99998;background:rgba(4,16,45,.5); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:.4s} .fbh.mopen .fbh-scrim,html.fbh-open .fbh-scrim{opacity:1;visibility:visible} html .fbh-mob{display:flex} .fbh-mob{position:fixed;top:0;right:0;z-index:99999; width:min(400px,88vw);height:100%;height:100dvh;background:#fff; display:flex;flex-direction:column; box-shadow:-20px 0 60px rgba(4,16,45,.28); transform:translateX(100%);transition:transform .42s cubic-bezier(.55,0,.15,1); overscroll-behavior:contain} .fbh.mopen .fbh-mob,html.fbh-open .fbh-mob{transform:translateX(0)} .fbh-mob .mhead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between; padding:20px 22px;color:#fff;position:relative;overflow:hidden; background:linear-gradient(120deg,#03123E,#042B6D 60%,#05489B)} .fbh-mob .mhead::before{content:"";position:absolute;inset:0;opacity:.1; background-image:repeating-linear-gradient(112deg,transparent 0 40px,rgba(46,176,231,.9) 40px 41px)} .fbh-mob .mhead .mlft{position:relative;display:flex;align-items:center;gap:11px;min-width:0} .fbh-mob .mhead .mlogo{flex:0 0 auto;width:40px;height:40px;border-radius:11px; background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center; padding:5px;box-shadow:0 4px 12px rgba(0,0,0,.22)} .fbh-mob .mhead .mlogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} .fbh-mob .mhead .mbrand{position:relative;display:flex;flex-direction:column;line-height:1.05;min-width:0} .fbh-mob .mhead .mbrand b{font-family:'IBM Plex Sans',sans-serif;font-size:18px;font-weight:700; letter-spacing:.02em;background:linear-gradient(90deg,#9FE2FF,#2EB0E7,#C9A8FF,#9FE2FF); background-size:250% 100%;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:#9FE2FF;animation:fbhNameFlow 9s linear infinite} .fbh-mob .mhead .mbrand small{font-size:8px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:3px} .fbh-mob .mclose{position:relative;width:40px;height:40px;border-radius:10px;cursor:pointer; border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center;transition:.25s;flex:0 0 40px} .fbh-mob .mclose:hover{background:rgba(255,255,255,.2)} .fbh-mob .mclose svg{width:18px;height:18px;flex:0 0 18px;stroke:#fff;fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round} .fbh-mob .min{flex:1;overflow-y:auto;padding:8px 20px 24px;-webkit-overflow-scrolling:touch} /* mobile careers banner */ .fbh-mob .mcareers{display:flex!important;align-items:center;gap:11px;margin:20px 0 2px; padding:12px 14px;border-radius:13px;position:relative;overflow:hidden; background:linear-gradient(120deg,#03123E,#0A5FB4);box-shadow:0 8px 20px rgba(4,24,83,.2)} .fbh-mob .mcareers::before{content:"";position:absolute;inset:0;opacity:.12; background-image:repeating-linear-gradient(112deg,transparent 0 30px,rgba(255,255,255,.8) 30px 31px)} .fbh-mob .mcareers .mic{position:relative;flex:0 0 36px;width:36px;height:36px;border-radius:10px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25); display:flex;align-items:center;justify-content:center} .fbh-mob .mcareers .mic svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .fbh-mob .mcareers .mtx{position:relative;display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .fbh-mob .mcareers .ttl{display:flex;align-items:center;gap:7px} .fbh-mob .mcareers b{font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;font-weight:700; color:#fff;line-height:1.2;white-space:nowrap} .fbh-mob .mcareers .dot{width:7px;height:7px;border-radius:50%;background:#3DDC97;flex:0 0 7px; animation:fbhPulse 2.2s ease-out infinite} .fbh-mob .mcareers small{font-size:11px;color:rgba(255,255,255,.78);line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fbh-mob .mcareers .go{position:relative;flex:0 0 16px;width:16px;height:16px} .fbh-mob .mcareers .go svg{width:16px;height:16px;stroke:#7FD6FF;fill:none;stroke-width:2.3; stroke-linecap:round;stroke-linejoin:round} .fbh-mob .mcareers:active{transform:scale(.985)} .fbh-mob a.plain,.fbh-macc>button{display:flex!important;align-items:center;justify-content:space-between; width:100%!important;padding:16px 6px!important;font-size:15.5px!important;font-weight:600;color:#152134!important; background:transparent!important;border:none;border-bottom:1px solid #EEF2F8!important;cursor:pointer; font-family:'Inter',sans-serif!important;text-align:left;border-radius:0!important;box-shadow:none!important} .fbh-macc>button svg{width:15px;height:15px;stroke:#9AA8BF;fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:.35s;flex:0 0 15px} .fbh-macc.open>button{color:#0066CC!important} .fbh-macc.open>button svg{transform:rotate(180deg);stroke:#0066CC} html .fbh-macc .sub{display:block} .fbh-macc .sub{max-height:0;overflow:hidden;transition:max-height .4s ease; background:#F7FAFD;margin:0 -20px;padding:0 20px;border-radius:0} /* 1000px was a guess and the Solutions group already runs past it on a narrow screen, where every label wraps. A large cap costs nothing: the transition still animates from 0, and nothing is ever clipped. */ .fbh-macc.open .sub{max-height:3000px;padding:6px 20px 12px} .fbh-macc .sub .sh{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:#0B87D0;padding:14px 4px 6px 14px} .fbh-macc .sub a{display:flex;align-items:center;gap:10px;padding:12px 4px 12px 14px; font-size:14.5px;color:#41506A;border-bottom:1px solid #EAF0F7;transition:.2s} .fbh-macc .sub a::before{content:"";width:6px;height:6px;border-radius:2px;flex:0 0 6px; background:linear-gradient(135deg,#2EB0E7,#0066CC);transform:rotate(45deg);opacity:.5;transition:.2s} .fbh-macc .sub a:hover,.fbh-macc .sub a:active{color:#0066CC;padding-left:20px} .fbh-macc .sub a:hover::before{opacity:1} .fbh-mob .mquick{display:flex;gap:10px;margin:18px 0 10px} .fbh-mob .mquick a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px; padding:12px;border-radius:12px;font-size:13px;font-weight:600;font-family:'IBM Plex Sans',sans-serif; color:#042B6D;background:#EFF6FD;border:1px solid #D8E9F8;transition:.2s} .fbh-mob .mquick a svg{width:15px;height:15px;flex:0 0 15px;stroke:#0066CC;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .fbh-mob .mquick a:active{background:#0066CC;color:#fff} .fbh-mob .mquick a:active svg{stroke:#fff} .fbh-mob .mcta{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;margin-top:8px; background:linear-gradient(95deg,#0066CC,#0B87D0);color:#fff!important;font-weight:600; font-family:'IBM Plex Sans',sans-serif;padding:15px;border-radius:12px; box-shadow:0 8px 20px rgba(0,102,204,.3)} .fbh-mob .mcta svg{width:16px;height:16px;flex:0 0 16px;stroke:#fff;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .fbh-mob .msocial{display:flex;justify-content:center;gap:12px;margin-top:22px; padding-top:20px;border-top:1px solid #EEF2F8} .fbh-mob .msocial a{width:42px;height:42px;border-radius:12px;display:flex;align-items:center; justify-content:center;background:#F1F6FC;border:1px solid #E1EBF6;transition:.2s} .fbh-mob .msocial svg{width:17px;height:17px;flex:0 0 17px;fill:#0B87D0;transition:.2s} .fbh-mob .msocial a:active{background:#0066CC} .fbh-mob .msocial a:active svg{fill:#fff} /* a more compact drawer header on small screens, so the logo and the name both fit */ @media(max-width:360px){ .fbh-mob .mhead{padding:18px 16px} .fbh-mob .mhead .mlft{gap:9px} .fbh-mob .mhead .mlogo{width:36px;height:36px;border-radius:10px} .fbh-mob .mhead .mbrand b{font-size:16px} .fbh-mob .mhead .mbrand small{font-size:7px;letter-spacing:.18em}} /* ===== ultrawide (1800px+): a little more breathing room ===== */ @media(min-width:1800px){.fbh{--fbh-max:1500px}} /* ===== laptop tier (1241–1440px): tightened a little ===== Note: the width of the logo lockup is set by the slogan rather than by the name, which is why the slogan's letter-spacing is reduced here too. */ @media(min-width:1241px) and (max-width:1440px){ .fbh{--fbh-pad:22px} .fbh-link{padding:27px 9px!important;font-size:13.5px!important} .fbh-logotxt b{font-size:18px!important} .fbh-logotxt small{font-size:8.2px;letter-spacing:.2em} .fbh-logo img{height:44px;max-width:60px} .fbh-main .wrap{gap:10px} .fbh-cta{padding:12px 20px;font-size:13.5px}} @media(max-width:1280px){ .fbh-mega.mega-xl{min-width:min(780px,calc(100vw - 48px))} .fbh-mega .feat{display:none}} /* the burger takes over below 1240px, where six items, the logo and the call to action no longer fit on one row */ @media(max-width:1240px){ .fbh-nav,.fbh-actions .fbh-cta{display:none!important} .fbh-burger{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;background:#fff!important;border:1.5px solid #E0E8F2!important;border-radius:12px!important;width:46px!important;height:46px!important;padding:0!important} .fbh-main .wrap{display:grid!important;grid-template-columns:auto auto;justify-content:space-between} .fbh-logo{justify-self:start} .fbh-actions{justify-self:end}} @media(max-width:820px){ .fbh-top .socials{display:none} .fbh-top .r .sep{display:none}} /* 561-680px: the email address is hidden in this narrow band alone, because the careers pill is still present here and the three of them will not fit on one row. Below 560px the pill goes and the email comes back. NOTE: !important is needed because the base rule already sets display:inline-flex!important on .fbh-top .item. */ @media(min-width:561px) and (max-width:680px){ .fbh-top .l .item.email{display:none!important}} /* ===== MOBILE TOP BAR (<=560px) ===== The careers pill is not shown on mobile; it lives in the drawer instead. The top bar is the phone number and the email address, centred. */ @media(max-width:560px){ .fbh{--fbh-pad:16px} .fbh-top .wrap{height:auto;padding:9px var(--fbh-pad);gap:10px;justify-content:center} .fbh-top .r{display:none!important} .fbh-top .l{gap:10px!important;min-width:0;justify-content:center;flex:1} .fbh-top .l .item.email{display:inline-flex!important} .fbh-top .item{font-size:11.5px!important;gap:6px!important} .fbh-top .item svg{width:12px!important;height:12px!important;min-width:12px!important;flex:0 0 12px!important} .fbh-logotxt b{font-size:16px!important} .fbh-logotxt small{display:block!important;font-size:7.5px!important;letter-spacing:.2em!important} .fbh-logo img{height:38px!important;max-width:52px!important} .fbh-logo .lsep{display:none} .fbh-logo{gap:10px} .fbh-main .wrap{height:64px}} /* small phones (<=400px): the phone number and the email address both stay visible, with smaller type, icons and gaps. The side padding stays at 16px so the edges of the top bar and the main bar still line up. */ @media(max-width:400px){ .fbh-logotxt b{font-size:14.5px!important} .fbh-logo img{height:34px!important;max-width:46px!important} .fbh-logo{gap:8px!important} .fbh-top .l{gap:8px!important} .fbh-top .item{font-size:10.8px!important;gap:5px!important} .fbh-top .item svg{width:11px!important;height:11px!important;min-width:11px!important;flex:0 0 11px!important}} /* last resort (<=340px, an original iPhone SE or a folded Galaxy Fold cover screen): the phone number is hidden and its icon kept, so tap-to-call still works and the email address is fully readable. */ @media(max-width:340px){ .fbh-top .item.phone span{display:none} .fbh-top .item{font-size:10.5px!important}} .fbh-careers .cshort{display:none}