/*---WIDGETS---*/

.croWideBanner{ --cwb-ink:#041c2c; --cwb-blue:#0153e3; --cwb-mark:#ffc220; --cwb-line:rgba(255,255,255,.13); --cwb-display:'Nunito Sans', system-ui, -apple-system, sans-serif; --cwb-body:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --cwb-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --cwb-spring:cubic-bezier(0.16,1,0.3,1); display:grid; grid-template-columns:1fr; gap:18px; align-items:center; width:100%; padding:20px; box-sizing:border-box; background:var(--cwb-ink); border:1px solid var(--cwb-line); border-radius:14px; text-decoration:none; -webkit-tap-highlight-color:transparent; } .croWideBanner:hover, .croWideBanner:focus{text-decoration:none} .croWideBannerCopy{display:block;min-width:0} .croWideBannerLabel{ display:block !important; margin:0 0 9px !important; color:var(--cwb-mark) !important; font-family:var(--cwb-mono) !important; font-size:10.5px !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:.15em !important; text-transform:uppercase !important; } .croWideBannerTitle{ display:block !important; margin:0 !important; color:#ffffff !important; font-family:var(--cwb-display) !important; font-size:22px !important; font-weight:800 !important; line-height:1.15 !important; letter-spacing:-.03em !important; text-wrap:balance; } .croWideBannerMark{ display:inline; white-space:nowrap; padding:.06em .13em; border-radius:3px; color:var(--cwb-ink); background-image:linear-gradient(var(--cwb-mark),var(--cwb-mark)); background-repeat:no-repeat; background-position:0 50%; background-size:100% 1.06em; } .croWideBannerMark:empty{display:none} @supports (animation-timeline: view()){ .croWideBannerMark{ animation:cwbSweep 1s linear both; animation-timeline:view(); animation-range:entry 15% cover 34%; } } @keyframes cwbSweep{ 0% {background-size:0% 1.06em; color:#ffffff} 42% { color:#ffffff} 58% { color:var(--cwb-ink)} 100%{background-size:100% 1.06em; color:var(--cwb-ink)} } .croWideBannerText{ display:block !important; margin:12px 0 0 !important; max-width:46ch; color:rgba(255,255,255,.64) !important; font-family:var(--cwb-body) !important; font-size:13.5px !important; font-weight:400 !important; line-height:1.45 !important; } .croWideBannerButton{ min-height:54px; padding:0 22px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:11px; background:var(--cwb-mark); border-radius:12px; box-shadow:0 0 0 rgba(1,83,227,0); white-space:nowrap; transition:transform 150ms var(--cwb-spring), box-shadow 150ms var(--cwb-spring); } .croWideBannerButtonText{ color:var(--cwb-ink) !important; font-family:var(--cwb-body) !important; font-size:15px !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing:-.012em !important; } .croWideBannerButton svg{ width:18px; height:18px; flex:0 0 18px; color:var(--cwb-ink); } @media (hover:hover) and (pointer:fine){ .croWideBanner:hover .croWideBannerButton{ transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--cwb-blue); } .croWideBanner:active .croWideBannerButton{ transform:translate(0,0); box-shadow:0 0 0 rgba(1,83,227,0); } } @media (hover:none){ .croWideBanner:active .croWideBannerButton{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--cwb-blue); } } .croWideBanner:focus-visible{ outline:3px solid var(--cwb-mark); outline-offset:4px; } @media (min-width:992px){ .croWideBanner{ grid-template-columns:minmax(0,1fr) auto; gap:32px; padding:26px 28px; } .croWideBannerTitle{font-size:27px !important} .croWideBannerText{font-size:14.5px !important;margin-top:13px !important} .croWideBannerButton{min-height:58px;padding:0 26px} .croWideBannerButtonText{font-size:16px !important} } @media (prefers-reduced-motion: reduce){ .croWideBannerMark{animation:none !important;background-size:100% 1.06em;color:var(--cwb-ink)} .croWideBannerButton{transition:none !important} }