Created
August 26, 2024 04:48
-
-
Save zeshhaan/683f10b44d331b8d27296efd8e47e64c to your computer and use it in GitHub Desktop.
Stripe Nav testing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header class="globalNav noDropdownTransition"> | |
| <div class="container-lg"> | |
| <ul class="navRoot allowExpand"> | |
| <li class="navSection logo"> | |
| <a class="rootLink item-home colorize" href="/"><h1><svg width="62" height="25"><title>Stripe</title><path d="M5 10.1c0-.6.6-.9 1.4-.9 1.2 0 2.8.4 4 1.1V6.5c-1.3-.5-2.7-.8-4-.8C3.2 5.7 1 7.4 1 10.3c0 4.4 6 3.6 6 5.6 0 .7-.6 1-1.5 1-1.3 0-3-.6-4.3-1.3v3.8c1.5.6 2.9.9 4.3.9 3.3 0 5.5-1.6 5.5-4.5.1-4.8-6-3.9-6-5.7zM29.9 20h4V6h-4v14zM16.3 2.7l-3.9.8v12.6c0 2.4 1.8 4.1 4.1 4.1 1.3 0 2.3-.2 2.8-.5v-3.2c-.5.2-3 .9-3-1.4V9.4h3V6h-3V2.7zm8.4 4.5L24.6 6H21v14h4v-9.5c1-1.2 2.7-1 3.2-.8V6c-.5-.2-2.5-.5-3.5 1.2zm5.2-2.3l4-.8V.8l-4 .8v3.3zM61.1 13c0-4.1-2-7.3-5.8-7.3s-6.1 3.2-6.1 7.3c0 4.8 2.7 7.2 6.6 7.2 1.9 0 3.3-.4 4.4-1.1V16c-1.1.6-2.3.9-3.9.9s-2.9-.6-3.1-2.5H61c.1-.2.1-1 .1-1.4zm-7.9-1.5c0-1.8 1.1-2.5 2.1-2.5s2 .7 2 2.5h-4.1zM42.7 5.7c-1.6 0-2.5.7-3.1 1.3l-.1-1h-3.6v18.5l4-.7v-4.5c.6.4 1.4 1 2.8 1 2.9 0 5.5-2.3 5.5-7.4-.1-4.6-2.7-7.2-5.5-7.2zm-1 11c-.9 0-1.5-.3-1.9-.8V10c.4-.5 1-.8 1.9-.8 1.5 0 2.5 1.6 2.5 3.7 0 2.2-1 3.8-2.5 3.8z"></path></svg></h1></a> | |
| </li> | |
| <li class="navSection primary"> | |
| <ul> | |
| <li class="productsRoot hasDropdown colorize" data-dropdown="products"> | |
| <span class="rootLink"><h2>Products</h2></span> | |
| </li> | |
| <li class="developersRoot hasDropdown colorize" data-dropdown="developers"> | |
| <span class="rootLink"><h2>Developers</h2></span> | |
| </li> | |
| <li class="companyRoot hasDropdown colorize" data-dropdown="company"> | |
| <span class="rootLink"><h2>Company</h2></span> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="navSection secondary"> | |
| <ul> | |
| <li> | |
| <a class="rootLink item-support colorize" href="https://support.stripe.com"> | |
| <h2>Support</h2> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="rootLink item-dashboard colorize" data-adroll-segment="submit_two" href="https://dashboard.stripe.com/login"> | |
| <h2>Sign in</h2> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="navSection mobile"> | |
| <a class="rootLink item-mobileMenu colorize"><h2>Menu</h2></a> | |
| <div class="popup"> | |
| <div class="popupContainer"> | |
| <a class="popupCloseButton">Close</a> | |
| <div class="mobileProducts"> | |
| <h4>Products</h4> | |
| <div class="mobileProductsList"> | |
| <ul> | |
| <li><a class="linkContainer item-payments" href="https://stripe.com/features"> | |
| <svg viewBox="0 0 48 48"><path fill="#87BBFD" class="hover-fillLight" d="M24 48C12.11 48 2.244 39.35.338 28H6.5V9H5.27C9.67 3.515 16.423 0 24 0c13.255 0 24 10.745 24 24S37.255 48 24 48z"></path><path fill="#555ABF" class="hover-fillDark" d="M25 21v8H.526A24.082 24.082 0 0 1 0 24 23.908 23.908 0 0 1 6.116 8H31.5c.828 0 1.5.67 1.5 1.5V21h-8zm-10.502-8.995a6.497 6.497 0 1 0 0 12.994 6.497 6.497 0 0 0 0-12.996z"></path><path fill="#FFF" d="M39.823 39.276a2.44 2.44 0 0 1-1.76.724H16.5a1.5 1.5 0 0 1-1.5-1.5v-18c0-.828.67-1.5 1.5-1.5h27.693a1.51 1.51 0 0 1 1.484 1.256c.21 1.217.323 2.467.323 3.744 0 5.936-2.355 11.32-6.177 15.276zM33.5 23.002a6.497 6.497 0 1 0 0 12.995 6.497 6.497 0 0 0 .002-12.994z"></path></svg>Payments | |
| </a></li> | |
| <li><a class="linkContainer item-subscriptions" href="https://stripe.com/subscriptions"> | |
| <svg viewBox="0 0 48 48"><path fill="#74E4A2" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"></path><path fill="#FFF" d="M39.558 30.977c-6.23 6.225-16.304 6.194-22.535-.03l13.975-13.962c-6.232-6.224-16.335-6.224-22.567 0-4.043 4.04-5.456 9.712-4.247 14.896l-.654.174a21.89 21.89 0 0 1-1.536-8.61c.284-11.806 10.003-21.35 21.823-21.446 6.15-.05 11.72 2.42 15.744 6.438 6.23 6.226 6.23 16.318 0 22.542z"></path><path fill="#159570" class="hover-fillDark" d="M33.653 21.413c1.43 5.336-1.735 10.82-7.068 12.25-5.332 1.43-10.814-1.736-12.242-7.072-1.43-5.334 1.735-10.82 7.068-12.25 5.334-1.43 10.815 1.738 12.244 7.074z"></path></svg>Subscriptions | |
| </a></li> | |
| <li><a class="linkContainer item-connect" href="https://stripe.com/connect"> | |
| <svg viewBox="0 0 48 48"><path fill="#68D4F8" class="hover-fillLight" d="M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c1.363 0 2.698.12 4 .338V15h5v5h14.662c.218 1.302.338 2.637.338 4z"></path><path fill="#FFF" d="M16.99 29.966L17 17l-5.55-.006a1.02 1.02 0 0 0-.725.3L2.65 25.446a1.55 1.55 0 0 0-.44 1.28c1.22 9.944 9.1 17.825 19.042 19.047.472.058.945-.104 1.28-.44l8.172-8.076c.192-.193.3-.453.3-.725L31 31l-12.985-.01a1.023 1.023 0 0 1-1.024-1.024z"></path><path fill="#217AB7" class="hover-fillDark" d="M47.697 20.195L37.194 30.702a1.03 1.03 0 0 1-.726.3h-5.462V18.03c0-.567-.46-1.025-1.025-1.025H16.994V11.52c0-.274.108-.534.3-.726L27.783.3C38 1.916 46.07 9.98 47.698 20.194z"></path></svg>Connect | |
| </a></li> | |
| </ul> | |
| <ul> | |
| <li><a class="linkContainer item-relay" href="https://stripe.com/relay"> | |
| <svg viewBox="0 0 48 48"><path fill="#FFA27B" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"></path><path fill="#C23D4B" class="hover-fillDark" d="M24 12.5c8.285 0 15 6.828 15 15.25S32.285 43 24 43c-8.284 0-15-6.828-15-15.25S15.716 12.5 24 12.5z"></path><path fill="#FFF" d="M25 38.925v6.288a.787.787 0 0 1-.788.787h-.424a.787.787 0 0 1-.788-.788v-6.287c-3.668-.49-6.5-3.623-6.5-7.425a7.5 7.5 0 0 1 15 0c0 3.802-2.832 6.935-6.5 7.425z"></path></svg>Relay | |
| </a></li> | |
| <li><a class="linkContainer item-atlas" href="https://stripe.com/atlas"> | |
| <svg viewBox="0 0 48 48"><path fill="#FCD669" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"></path><path fill="#CE7C3A" class="hover-fillDark" d="M24.012 1.834c.366.005.73.196.92.575l16.825 33.72c.396.79-.314 1.685-1.175 1.48L24 33.626V1.834h.01z"></path><path fill="#FFF" d="M24 1.834v31.794l-16.584 3.98A1.043 1.043 0 0 1 6.24 36.13L23.067 2.41c.195-.39.572-.58.947-.576H24z"></path></svg>Atlas | |
| </a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mobileSecondaryNav"> | |
| <ul> | |
| <li><a class="item-pricing" href="https://stripe.com/pricing">Pricing</a></li> | |
| <li><a class="item-gallery" href="https://stripe.com/customers">Customers</a></li> | |
| <li><a class="item-documentation" href="https://stripe.com/docs">Documentation</a></li> | |
| </ul> | |
| <ul> | |
| <li><a class="item-about" href="https://stripe.com/about">About Stripe</a></li> | |
| <li><a class="item-jobs" href="https://stripe.com/jobs">Jobs</a></li> | |
| <li><a class="item-blog" href="https://stripe.com/blog">Blog</a></li> | |
| </ul> | |
| </div> | |
| <a class="mobileSignIn" data-adroll-segment="submit_two" href="https://dashboard.stripe.com/login">Sign in</a> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="dropdownRoot"> | |
| <div class="dropdownBackground" style="transform: translateX(421px) scaleX(0.707692) scaleY(1.1075);"> | |
| <div class="alternateBackground" style="transform: translateY(255.53px);"></div> | |
| </div> | |
| <div class="dropdownArrow" style="transform: translateX(605px) rotate(45deg);"></div> | |
| <div class="dropdownContainer" style="transform: translateX(421px); width: 368px; height: 443px;"> | |
| <div class="dropdownSection" data-dropdown="products"> | |
| <div class="dropdownContent"> | |
| <div class="linkGroup"> | |
| <ul class="productsGroup"> | |
| <li><a class="linkContainer item-payments" href="https://stripe.com/payments"> | |
| <svg viewBox="0 0 48 48"><path fill="#87BBFD" class="hover-fillLight" d="M24 48C12.11 48 2.244 39.35.338 28H6.5V9H5.27C9.67 3.515 16.423 0 24 0c13.255 0 24 10.745 24 24S37.255 48 24 48z"></path><path fill="#555ABF" class="hover-fillDark" d="M25 21v8H.526A24.082 24.082 0 0 1 0 24 23.908 23.908 0 0 1 6.116 8H31.5c.828 0 1.5.67 1.5 1.5V21h-8zm-10.502-8.995a6.497 6.497 0 1 0 0 12.994 6.497 6.497 0 0 0 0-12.996z"></path><path fill="#FFF" d="M39.823 39.276a2.44 2.44 0 0 1-1.76.724H16.5a1.5 1.5 0 0 1-1.5-1.5v-18c0-.828.67-1.5 1.5-1.5h27.693a1.51 1.51 0 0 1 1.484 1.256c.21 1.217.323 2.467.323 3.744 0 5.936-2.355 11.32-6.177 15.276zM33.5 23.002a6.497 6.497 0 1 0 0 12.995 6.497 6.497 0 0 0 .002-12.994z"></path></svg> | |
| <div class="productLinkContent"> | |
| <h3 class="linkTitle">Payments</h3> | |
| <p class="linkSub">A complete commerce toolkit, built for developers.</p> | |
| </div> | |
| </a></li> | |
| <li><a class="linkContainer item-subscriptions" href="https://stripe.com/subscriptions"> | |
| <svg viewBox="0 0 48 48"><path fill="#74E4A2" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"></path><path fill="#FFF" d="M39.558 30.977c-6.23 6.225-16.304 6.194-22.535-.03l13.975-13.962c-6.232-6.224-16.335-6.224-22.567 0-4.043 4.04-5.456 9.712-4.247 14.896l-.654.174a21.89 21.89 0 0 1-1.536-8.61c.284-11.806 10.003-21.35 21.823-21.446 6.15-.05 11.72 2.42 15.744 6.438 6.23 6.226 6.23 16.318 0 22.542z"></path><path fill="#159570" class="hover-fillDark" d="M33.653 21.413c1.43 5.336-1.735 10.82-7.068 12.25-5.332 1.43-10.814-1.736-12.242-7.072-1.43-5.334 1.735-10.82 7.068-12.25 5.334-1.43 10.815 1.738 12.244 7.074z"></path></svg> | |
| <div class="productLinkContent"> | |
| <h3 class="linkTitle">Subscriptions</h3> | |
| <p class="linkSub">The smart engine for recurring payments.</p> | |
| </div> | |
| </a></li> | |
| <li><a class="linkContainer item-connect" href="https://stripe.com/connect"> | |
| <svg viewBox="0 0 48 48"><path fill="#68D4F8" class="hover-fillLight" d="M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c1.363 0 2.698.12 4 .338V15h5v5h14.662c.218 1.302.338 2.637.338 4z"></path><path fill="#FFF" d="M16.99 29.966L17 17l-5.55-.006a1.02 1.02 0 0 0-.725.3L2.65 25.446a1.55 1.55 0 0 0-.44 1.28c1.22 9.944 9.1 17.825 19.042 19.047.472.058.945-.104 1.28-.44l8.172-8.076c.192-.193.3-.453.3-.725L31 31l-12.985-.01a1.023 1.023 0 0 1-1.024-1.024z"></path><path fill="#217AB7" class="hover-fillDark" d="M47.697 20.195L37.194 30.702a1.03 1.03 0 0 1-.726.3h-5.462V18.03c0-.567-.46-1.025-1.025-1.025H16.994V11.52c0-.274.108-.534.3-.726L27.783.3C38 1.916 46.07 9.98 47.698 20.194z"></path></svg> | |
| <div class="productLinkContent"> | |
| <h3 class="linkTitle">Connect</h3> | |
| <p class="linkSub">Everything platforms need to get sellers paid.</p> | |
| </div> | |
| </a></li> | |
| <li><a class="linkContainer item-relay" href="https://stripe.com/relay"> | |
| <svg viewBox="0 0 48 48"><path fill="#FFA27B" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"></path><path fill="#C23D4B" class="hover-fillDark" d="M24 12.5c8.285 0 15 6.828 15 15.25S32.285 43 24 43c-8.284 0-15-6.828-15-15.25S15.716 12.5 24 12.5z"></path><path fill="#FFF" d="M25 38.925v6.288a.787.787 0 0 1-.788.787h-.424a.787.787 0 0 1-.788-.788v-6.287c-3.668-.49-6.5-3.623-6.5-7.425a7.5 7.5 0 0 1 15 0c0 3.802-2.832 6.935-6.5 7.425z"></path></svg> | |
| <div class="productLinkContent"> | |
| <h3 class="linkTitle">Relay</h3> | |
| <p class="linkSub">Sell your products in other mobile apps.</p> | |
| </div> | |
| </a></li> | |
| <li><a class="linkContainer item-atlas" href="https://stripe.com/atlas"> | |
| <svg viewBox="0 0 48 48"><path fill="#FCD669" class="hover-fillLight" d="M24 0c13.255 0 24 10.745 24 24S37.255 48 24 48 0 37.255 0 24 10.745 0 24 0z"></path><path fill="#CE7C3A" class="hover-fillDark" d="M24.012 1.834c.366.005.73.196.92.575l16.825 33.72c.396.79-.314 1.685-1.175 1.48L24 33.626V1.834h.01z"></path><path fill="#FFF" d="M24 1.834v31.794l-16.584 3.98A1.043 1.043 0 0 1 6.24 36.13L23.067 2.41c.195-.39.572-.58.947-.576H24z"></path></svg> | |
| <div class="productLinkContent"> | |
| <h3 class="linkTitle">Atlas</h3> | |
| <p class="linkSub">A new way to start an internet business.</p> | |
| </div> | |
| </a></li> | |
| </ul> | |
| </div> | |
| <ul class="linkGroup linkList prodsubGroup"> | |
| <li><a class="linkContainer item-pricing" href="https://stripe.com/pricing"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#6772E5" class="hover-fillDark" d="M15.998 6.98c0 .24-.083.458-.217.635a1.373 1.373 0 0 1-.187.24l-7.736 7.742c-.534.534-1.4.534-1.934 0L1.41 11.08a1.37 1.37 0 0 1 0-1.935l7.736-7.743c.15-.15.33-.255.52-.32a.918.918 0 0 1 .16-.048c.136-.03.275-.034.412-.02l4.192.002c.867 0 1.57.665 1.57 1.486l-.002 4.48zm-2.366-3.62a1.254 1.254 0 0 0-1.772 1.77 1.254 1.254 0 0 0 1.772-1.77z"></path><path fill="#87BBFD" class="hover-fillLight" d="M5.143 10.396l3.253-3.254c.2-.2.523-.2.722 0l.723.723c.2.2.2.524.003.723L6.59 11.842c-.2.2-.524.2-.724 0l-.723-.724a.51.51 0 0 1 0-.723z"></path></svg>Pricing</h3> | |
| <p class="linkSub">Always know what you’ll pay.</p> | |
| </a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="dropdownSection" data-dropdown="developers"> | |
| <div class="dropdownContent"> | |
| <div class="linkGroup documentationGroup"> | |
| <a class="linkContainer withIcon item-documentation" href="https://stripe.com/docs"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#87BBFD" class="hover-fillLight" d="M.945 1.998h3.632C6.744 1.998 8.5 3.005 8.5 4.83v11.583c-.512 0-1.015-.337-1.33-.59-1.03-.828-3.057-.828-5.222-.828H.945A.944.944 0 0 1 0 14.052V2.944C0 2.422.423 2 .945 2z"></path><path fill="#6772E5" class="hover-fillDark" d="M16.055 1.998h-3.632C10.257 1.998 8.5 3.005 8.5 4.83v11.583c.512 0 1.015-.337 1.33-.59 1.03-.828 3.057-.828 5.222-.828h1.003A.944.944 0 0 0 17 14.05V2.945A.944.944 0 0 0 16.055 2z"></path></svg>Documentation</h3> | |
| <span class="linkSub">Start integrating Stripe’s products and tools.</span> | |
| </a> | |
| <div class="documentationArticles"> | |
| <ul> | |
| <li><h4>Get started</h4></li> | |
| <li><a href="https://stripe.com/docs/custom-form">Stripe.js</a></li> | |
| <li><a href="https://stripe.com/docs/checkout/tutorial">Checkout</a></li> | |
| <li><a href="https://stripe.com/docs/mobile">Mobile apps</a></li> | |
| <li><a href="https://stripe.com/docs/libraries">Libraries</a></li> | |
| </ul> | |
| <ul> | |
| <li><h4>Popular topics</h4></li> | |
| <li><a href="https://stripe.com/docs/apple-pay">Apple Pay</a></li> | |
| <li><a href="https://stripe.com/docs/testing">Testing</a></li> | |
| <li><a href="https://stripe.com/docs/checklist">Launch checklist</a></li> | |
| <li><a href="https://stripe.com/docs/libraries#third-party-plugins">Plug-ins</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <ul class="linkGroup linkList developersGroup"> | |
| <li><a class="linkContainer item-apiReference" href="https://stripe.com/docs/api"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path d="M2 15h13M2 11h13M2 7h13M2 3h13" fill="none" stroke="#6772e5" class="hover-strokeDark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Full API Reference</h3> | |
| </a></li> | |
| <li><a class="linkContainer item-apiStatus" href="https://status.stripe.com"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path d="M1 9h2.95l3-6.5 3 12 3-5.45L16 9" fill="none" stroke="#6772e5" class="hover-strokeDark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>API Status</h3> | |
| </a></li> | |
| <li><a class="linkContainer item-openSource" href="https://stripe.com/open-source"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#6772E5" class="hover-fillDark" d="M8.5 17a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17zM6.987 6.078a.684.684 0 0 0-.968-.968L3.116 8.012a.684.684 0 0 0 0 .967l2.9 2.9a.684.684 0 0 0 .97-.967l-2.42-2.418 2.42-2.42zm6.996 1.95L11.08 5.123a.684.684 0 0 0-.966.968l2.418 2.42-2.418 2.417a.684.684 0 0 0 .967.967l2.904-2.902a.684.684 0 0 0 0-.966z"></path></svg>Open Source</h3> | |
| </a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="dropdownSection" data-dropdown="company"> | |
| <div class="dropdownContent"> | |
| <ul class="linkGroup linkList companyGroup"> | |
| <li><a class="linkContainer item-about" href="https://stripe.com/about"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#6772E5" class="hover-fillDark" d="M8.5 17a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17zm.178-10.89c.76 0 1.726.278 2.486.69V4.443c-.828-.33-1.656-.502-2.484-.502-2.028 0-3.41 1.06-3.41 2.83 0 2.77 3.8 2.32 3.8 3.513 0 .462-.37.612-.93.612-.827 0-1.867-.366-2.706-.823v2.388c.93.4 1.843.592 2.705.592 2.077 0 3.48-1.027 3.48-2.827 0-2.98-3.82-2.447-3.82-3.572-.003-.39.352-.542.877-.542z"></path></svg>About Stripe</h3> | |
| </a></li> | |
| <li><a class="linkContainer item-customers" href="https://stripe.com/customers"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#87BBFD" class="hover-fillLight" d="M2 16a1 1 0 0 1-1-1V9a4 4 0 0 1 8 0v7H2zm3-9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"></path><path fill="#6772E5" class="hover-fillDark" d="M15 16H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h.55a2.5 2.5 0 0 1 4.9 0H15a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1z"></path><path fill="#87BBFD" class="hover-fillLight" d="M11 12h2v4h-2v-4z"></path></svg>Customers</h3> | |
| </a></li> | |
| <li><a class="linkContainer item-jobs" href="https://stripe.com/jobs"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#6772E5" class="hover-fillDark" d="M1.5 4h14c.828 0 1.5.67 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-14A1.5 1.5 0 0 1 0 13.5v-8C0 4.67.67 4 1.5 4z"></path><path fill="#87BBFD" class="hover-fillLight" d="M13 15V4h2v11h-2zM2 4h2v11H2V4z"></path><path fill="#6772E5" class="hover-fillDark" d="M11.5 3.5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1V4H4v-.5A2.5 2.5 0 0 1 6.5 1h4A2.5 2.5 0 0 1 13 3.5V4h-1.5v-.5z"></path></svg>Jobs</h3> | |
| </a></li> | |
| </ul> | |
| <div class="linkGroup blogGroup"> | |
| <a class="linkContainer withIcon item-blog" href="https://stripe.com/blog"> | |
| <h3 class="linkTitle linkIcon"><svg width="17" height="17"><path fill="#87BBFD" class="hover-fillLight" d="M1 4h4.5v11H1.75A1.75 1.75 0 0 1 0 13.25V5a1 1 0 0 1 1-1z"></path><path fill="#6772E5" class="hover-fillDark" d="M14 15H2v-.025a2.243 2.243 0 0 0 2-2.225V3a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v9a3 3 0 0 1-3 3zm1-11H6v3h9V4z"></path></svg>From the blog</h3> | |
| </a> | |
| <ul class="blogPosts"> | |
| <li><a class="fresh" href="/blog/stripe-in-singapore"><span>Stripe in Singapore!</span></a></li> | |
| <li><a class="fresh" href="/blog/instant-payouts-for-marketplaces"><span>Instant Payouts for Marketplaces</span></a></li> | |
| <li><a href="/blog/stripe-and-runkit"><span>Stripe and RunKit</span></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="content"> | |
| <ul> | |
| <li><a href="https://dashboard.stripe.com/register" class="common-Button"> | |
| Create account | |
| </a> | |
| </li></ul> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function globalNavDropdowns(e) { | |
| var t = this; | |
| this.container = document.querySelector(e), this.root = this.container.querySelector(".navRoot"), this.isCompact = !1, this.logoNav = this.root.querySelector(".navSection.logo"), this.secondaryNav = this.root.querySelector(".navSection.secondary"), this.secondaryNavUl = this.root.querySelector(".navSection.secondary > ul"), this.minSecondaryNavWidth = this.secondaryNavUl.getBoundingClientRect().width, this.calculateLayout(), this.root.classList.add("allowExpand"), window.addEventListener("resize", this.calculateLayout.bind(this)), this.container.classList.add("noDropdownTransition"), this.dropdownBackground = this.container.querySelector(".dropdownBackground"), this.dropdownBackgroundAlt = this.container.querySelector(".alternateBackground"), this.dropdownContainer = this.container.querySelector(".dropdownContainer"), this.dropdownArrow = this.container.querySelector(".dropdownArrow"), this.dropdownSections = Strut.queryArray(".dropdownSection", this.container).map(function(e) { | |
| return { | |
| el: e, | |
| name: e.getAttribute("data-dropdown"), | |
| content: e.querySelector(".dropdownContent") | |
| } | |
| }), this.dropdownContainer.addEventListener("mouseenter", function(e) { | |
| t.stopCloseTimeout() | |
| }), this.dropdownContainer.addEventListener("mouseleave", function(e) { | |
| t.startCloseTimeout() | |
| }), this.dropdownRoots = Strut.queryArray(".hasDropdown", this.root), this.dropdownRoots.forEach(function(e, n) { | |
| Strut.touch.isSupported ? e.querySelector(".rootLink").addEventListener("touchend", function(n) { | |
| n.stopPropagation(); | |
| var r = t.activeDropdown === e; | |
| t.closeDropdown(), r || t.openDropdown(e) | |
| }) : (e.addEventListener("mouseenter", function(n) { | |
| t.stopCloseTimeout(), t.openDropdown(e) | |
| }), e.addEventListener("mouseleave", function(e) { | |
| t.startCloseTimeout() | |
| })) | |
| }), Strut.touch.isSupported && (document.body.addEventListener("touchend", function(e) { | |
| Strut.touch.isDragging || t.closeDropdown() | |
| }), this.dropdownContainer.addEventListener("touchend", function(e) { | |
| e.stopPropagation() | |
| })) | |
| } | |
| function globalNavPopup(e) { | |
| var t = this, | |
| n = Strut.touch.isSupported ? "touchend" : "click"; | |
| this.activeClass = "globalPopupActive", this.root = document.querySelector(e), this.link = this.root.querySelector(".rootLink"), this.popup = this.root.querySelector(".popup"), this.closeButton = this.root.querySelector(".popupCloseButton"), this.link.addEventListener(n, function(e) { | |
| e.stopPropagation(), t.togglePopup() | |
| }), this.popup.addEventListener(n, function(e) { | |
| e.stopPropagation() | |
| }), this.closeButton && this.closeButton.addEventListener(n, function(e) { | |
| t.closeAllPopups() | |
| }), document.body.addEventListener(n, function(e) { | |
| Strut.touch.isDragging || t.closeAllPopups() | |
| }, !1) | |
| }(function() { | |
| window.$ && window.$.ajaxPrefilter && $(function() { | |
| return $.ajaxPrefilter(function(e, t, n) { | |
| var r, i; | |
| return i = $("meta[name=csrf-token]"), r = i ? i.attr("content") : "", n.setRequestHeader("x-stripe-csrf-token", r) | |
| }) | |
| }) | |
| }).call(this), "use strict"; | |
| var Strut = { | |
| random: function(e, t) { | |
| return Math.random() * (t - e) + e | |
| }, | |
| arrayRandom: function(e) { | |
| return e[Math.floor(Math.random() * e.length)] | |
| }, | |
| interpolate: function(e, t, n) { | |
| return e * (1 - n) + t * n | |
| }, | |
| rangePosition: function(e, t, n) { | |
| return (n - e) / (t - e) | |
| }, | |
| clamp: function(e, t, n) { | |
| return Math.max(Math.min(e, n), t) | |
| }, | |
| queryArray: function(e, t) { | |
| return t || (t = document.body), Array.prototype.slice.call(t.querySelectorAll(e)) | |
| }, | |
| ready: function(e) { | |
| document.readyState == "complete" ? e() : document.addEventListener("DOMContentLoaded", e) | |
| } | |
| }; | |
| Strut.isRetina = window.devicePixelRatio > 1.3, Strut.mobileViewportWidth = 670, Strut.isMobileViewport = window.innerWidth < Strut.mobileViewportWidth, window.addEventListener("resize", function() { | |
| Strut.isMobileViewport = window.innerWidth < Strut.mobileViewportWidth | |
| }), Strut.touch = { | |
| isSupported: "ontouchstart" in window || navigator.maxTouchPoints, | |
| isDragging: !1 | |
| }, document.addEventListener("DOMContentLoaded", function() { | |
| document.body.addEventListener("touchmove", function() { | |
| Strut.touch.isDragging = !0 | |
| }), document.body.addEventListener("touchstart", function() { | |
| Strut.touch.isDragging = !1 | |
| }) | |
| }), Strut.load = { | |
| images: function(e, t) { | |
| typeof e == "string" && (e = [e]); | |
| var n = -e.length; | |
| e.forEach(function(e) { | |
| var r = new Image; | |
| r.src = e, r.onload = function() { | |
| n++, n === 0 && t && t() | |
| } | |
| }) | |
| }, | |
| css: function(e, t) { | |
| var n = document.createElement("link"), | |
| r = window.readConfig("strut_files") || {}, | |
| i = r[e]; | |
| if (!i) throw new Error('CSS file "' + e + '" not found in strut_files config'); | |
| n.href = i, n.rel = "stylesheet", document.head.appendChild(n), t && (n.onload = t) | |
| }, | |
| js: function(e, t) { | |
| var n = document.createElement("script"), | |
| r = window.readConfig("strut_files") || {}, | |
| i = r[e]; | |
| if (!i) throw new Error('Javascript file "' + e + '" not found in strut_files config'); | |
| n.src = i, document.head.appendChild(n), t && (n.onload = t) | |
| } | |
| }, Strut.supports = { | |
| es6: function() { | |
| try { | |
| return new Function("(a = 0) => a"), !0 | |
| } catch (e) { | |
| return !1 | |
| } | |
| }(), | |
| pointerEvents: function() { | |
| var e = document.createElement("a").style; | |
| return e.cssText = "pointer-events:auto", e.pointerEvents === "auto" | |
| }(), | |
| positionSticky: function() { | |
| var e = "position:", | |
| t = "sticky", | |
| n = document.createElement("a"), | |
| r = n.style, | |
| i = " -webkit- -moz- -o- -ms- ".split(" "); | |
| return r.cssText = e + i.join(t + ";" + e).slice(0, -e.length), r.position.indexOf(t) !== -1 | |
| }(), | |
| masks: function() { | |
| return !/MSIE|Trident|Edge/i.test(navigator.userAgent) | |
| }() | |
| }, globalNavDropdowns.prototype.calculateLayout = function() { | |
| var e = document.body.clientWidth, | |
| t = this.logoNav.getBoundingClientRect().width; | |
| this.isCompact && t > this.minSecondaryNavWidth ? (this.secondaryNav.classList.remove("compact"), this.isCompact = !1) : t < this.minSecondaryNavWidth && (this.secondaryNav.classList.add("compact"), this.isCompact = !0) | |
| }, globalNavDropdowns.prototype.openDropdown = function(e) { | |
| var t = this; | |
| if (this.activeDropdown === e) return; | |
| this.container.classList.add("overlayActive"), this.container.classList.add("dropdownActive"), this.activeDropdown = e, this.dropdownRoots.forEach(function(e, t) { | |
| e.classList.remove("active") | |
| }), e.classList.add("active"); | |
| var n = e.getAttribute("data-dropdown"), | |
| r = "left", | |
| i, s, o; | |
| this.dropdownSections.forEach(function(e) { | |
| e.el.classList.remove("active"), e.el.classList.remove("left"), e.el.classList.remove("right"), e.name == n ? (e.el.classList.add("active"), r = "right", i = e.content.offsetWidth, s = e.content.offsetHeight, o = e.content) : e.el.classList.add(r) | |
| }); | |
| var u = 520, | |
| a = 400, | |
| f = i / u, | |
| l = s / a, | |
| c = e.querySelector(".rootLink").getBoundingClientRect(), | |
| h = c.left + c.width / 2 - i / 2; | |
| h = Math.round(Math.max(h, 10)), clearTimeout(this.disableTransitionTimeout), this.enableTransitionTimeout = setTimeout(function() { | |
| t.container.classList.remove("noDropdownTransition") | |
| }, 50), this.dropdownBackground.style.transform = "translateX(" + h + "px) scaleX(" + f + ") scaleY(" + l + ")", this.dropdownContainer.style.transform = "translateX(" + h + "px)", this.dropdownContainer.style.width = i + "px", this.dropdownContainer.style.height = s + "px"; | |
| var p = Math.round(c.left + c.width / 2); | |
| this.dropdownArrow.style.transform = "translateX(" + p + "px) rotate(45deg)"; | |
| var d = o.children[0].offsetHeight / l; | |
| this.dropdownBackgroundAlt.style.transform = "translateY(" + d + "px)" | |
| }, globalNavDropdowns.prototype.closeDropdown = function() { | |
| var e = this; | |
| if (!this.activeDropdown) return; | |
| this.dropdownSections.forEach(function(e) { | |
| e.el.classList.remove("active"), e.el.classList.remove("left"), e.el.classList.remove("right") | |
| }), this.dropdownRoots.forEach(function(e, t) { | |
| e.classList.remove("active") | |
| }), clearTimeout(this.enableTransitionTimeout), this.disableTransitionTimeout = setTimeout(function() { | |
| e.container.classList.add("noDropdownTransition") | |
| }, 50), this.container.classList.remove("overlayActive"), this.container.classList.remove("dropdownActive"), this.activeDropdown = undefined | |
| }, globalNavDropdowns.prototype.startCloseTimeout = function() { | |
| var e = this; | |
| e.closeDropdownTimeout = setTimeout(function() { | |
| e.closeDropdown() | |
| }, 50) | |
| }, globalNavDropdowns.prototype.stopCloseTimeout = function() { | |
| var e = this; | |
| clearTimeout(e.closeDropdownTimeout) | |
| }, globalNavPopup.prototype.togglePopup = function() { | |
| var e = this.root.classList.contains(this.activeClass); | |
| this.closeAllPopups(!0), e || this.root.classList.add(this.activeClass) | |
| }, globalNavPopup.prototype.closeAllPopups = function(e) { | |
| var t = document.getElementsByClassName(this.activeClass); | |
| for (var n = 0; n < t.length; n++) t[n].classList.remove(this.activeClass) | |
| }, Strut.supports.pointerEvents || Strut.load.css("v3/shared/navigation_ie10.css"), Strut.ready(function() { | |
| new globalNavDropdowns(".globalNav"), new globalNavPopup(".globalNav .navSection.mobile"), new globalNavPopup(".globalFooterNav .select.country"), new globalNavPopup(".globalFooterNav .select.language") | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box | |
| } | |
| blockquote, | |
| body, | |
| dd, | |
| dl, | |
| figure, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| ol, | |
| p, | |
| pre, | |
| ul { | |
| margin: 0; | |
| padding: 0 | |
| } | |
| ol, | |
| ul { | |
| list-style: none | |
| } | |
| a { | |
| text-decoration: none | |
| } | |
| :root { | |
| overflow-x: hidden; | |
| height: 100% | |
| } | |
| body { | |
| min-height: 100%; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| font-size: 62.5%; | |
| font-family: Camphor, Open Sans, Segoe UI, sans-serif; | |
| font-weight: 400; | |
| font-style: normal; | |
| -webkit-text-size-adjust: 100%; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale | |
| } | |
| .globalContent { | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1 | |
| } | |
| html[lang=ja] body { | |
| font-family: Meiryo, Hiragino Sans, sans-serif | |
| } | |
| code, | |
| pre { | |
| font-family: Source Code Pro, Consolas, Menlo, monospace | |
| } | |
| @font-face { | |
| font-family: StripeIcons; | |
| src: url(/fonts/stripe-icons.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Camphor; | |
| font-weight: 300; | |
| src: url(/fonts/camphor/ad56a69b-adb0-46e7-8c51-446179998eaa.woff2) format('woff2'), url(/fonts/camphor/eba0cf0d-7b7f-4758-99c0-99b285b8f411.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Camphor; | |
| font-weight: 300; | |
| font-style: italic; | |
| src: url(/fonts/camphor/c8b26845-1e2a-4dec-ad2e-0958df154226.woff2) format('woff2'), url(/fonts/camphor/e4fc7d99-7823-4ac3-8c43-45d9217657c1.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Camphor; | |
| font-weight: 400; | |
| src: url(/fonts/camphor/4b0f2143-ed99-4a36-8778-557047d0a0a3.woff2) format('woff2'), url(/fonts/camphor/e928eeb3-ada3-4ebe-8432-24b51de579d9.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Camphor; | |
| font-weight: 400; | |
| font-style: italic; | |
| src: url(/fonts/camphor/0feb6bad-f217-487a-9933-683c076c60c5.woff2) format('woff2'), url(/fonts/camphor/3588acd7-ed88-4957-8a46-8bd584b4ba82.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Camphor; | |
| font-weight: 500; | |
| src: url(/fonts/camphor/5be42b48-4b66-4ef9-a5a2-7e2cc9647e8f.woff2) format('woff2'), url(/fonts/camphor/7433ab7c-aefd-4fc6-9ed1-a7b5a258280c.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Camphor; | |
| font-weight: 500; | |
| font-style: italic; | |
| src: url(/fonts/camphor/b28999e7-afdb-46c9-9a47-fc8ace8012b6.woff2) format('woff2'), url(/fonts/camphor/078354a3-b8f8-437a-af3f-df4ef42beca3.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Camphor; | |
| font-weight: 600; | |
| src: url(/fonts/camphor/80187b27-7b69-46c4-9cf6-71738cd851b8.woff2) format('woff2'), url(/fonts/camphor/24b0bf59-671f-45c6-9afa-6d14b1321adf.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Camphor; | |
| font-weight: 600; | |
| font-style: italic; | |
| src: url(/fonts/camphor/6891b33a-8e75-46d1-91bf-890ee215cbd2.woff2) format('woff2'), url(/fonts/camphor/2c64d5fc-a995-4d0d-b117-107e73b3dd46.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Source Code Pro; | |
| font-weight: 400; | |
| src: url(/fonts/sourcecodepro/SourceCodePro-Medium.otf.woff2) format('woff2'), url(/fonts/sourcecodepro/SourceCodePro-Medium.otf.woff) format('woff') | |
| } | |
| @font-face { | |
| font-family: Source Code Pro; | |
| font-weight: 600; | |
| src: url(/fonts/sourcecodepro/SourceCodePro-Bold.otf.woff2) format('woff2'), url(/fonts/sourcecodepro/SourceCodePro-Bold.otf.woff) format('woff') | |
| } | |
| .container, | |
| .container-fluid, | |
| .container-lg, | |
| .container-wide, | |
| .container-xl { | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| width: 100% | |
| } | |
| .container, | |
| .container-lg { | |
| max-width: 1040px | |
| } | |
| .container-wide, | |
| .container-xl { | |
| max-width: 1160px | |
| } | |
| .common-SuperTitle { | |
| font-weight: 300; | |
| font-size: 45px; | |
| line-height: 60px; | |
| color: #32325d; | |
| letter-spacing: -.01em | |
| } | |
| @media (min-width:670px) { | |
| .common-SuperTitle { | |
| font-size: 50px; | |
| line-height: 70px | |
| } | |
| } | |
| .common-PageTitle { | |
| font-weight: 400; | |
| font-size: 34px; | |
| line-height: 43px; | |
| color: #32325d | |
| } | |
| @media (min-width:670px) { | |
| .common-PageTitle { | |
| font-size: 40px; | |
| line-height: 50px | |
| } | |
| } | |
| .common-PageSubtitle { | |
| font-weight: 300; | |
| font-size: 34px; | |
| line-height: 43px; | |
| color: #6772e5 | |
| } | |
| @media (min-width:670px) { | |
| .common-PageSubtitle { | |
| font-size: 40px; | |
| line-height: 50px | |
| } | |
| } | |
| .common-IntroText { | |
| font-weight: 400; | |
| font-size: 21px; | |
| line-height: 31px; | |
| color: #525f7f | |
| } | |
| @media (min-width:670px) { | |
| .common-IntroText { | |
| font-size: 24px; | |
| line-height: 36px | |
| } | |
| } | |
| .common-BodyTitle { | |
| font-weight: 500; | |
| font-size: 19px; | |
| line-height: 28px; | |
| color: #32325d | |
| } | |
| .common-BodyText { | |
| font-weight: 400; | |
| font-size: 17px; | |
| line-height: 26px; | |
| color: #6b7c93 | |
| } | |
| .common-UppercaseTitle { | |
| font-size: 20px; | |
| line-height: 31px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .025em | |
| } | |
| @media (min-width:670px) { | |
| .common-UppercaseTitle { | |
| font-size: 22px; | |
| line-height: 33px | |
| } | |
| } | |
| .common-Uppercase { | |
| font-size: 17px; | |
| line-height: 26px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .025em | |
| } | |
| .common-AlignRight { | |
| text-align: right | |
| } | |
| .common-NoWrap { | |
| white-space: nowrap | |
| } | |
| .common-ProductLockup { | |
| font-size: 24px; | |
| line-height: 30px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .04em; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center | |
| } | |
| @media (min-width:670px) { | |
| .common-ProductLockup { | |
| font-size: 28px; | |
| line-height: 38px | |
| } | |
| } | |
| .common-ProductLockup .icon { | |
| width: 64px; | |
| height: 64px; | |
| overflow: hidden; | |
| border-radius: 50%; | |
| box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08); | |
| margin-right: 20px | |
| } | |
| @media (min-width:670px) { | |
| .common-ProductLockup .icon { | |
| width: 72px; | |
| height: 72px | |
| } | |
| } | |
| .common-Link { | |
| color: #6772e5; | |
| font-weight: 500; | |
| -webkit-transition: color .1s ease; | |
| transition: color .1s ease; | |
| cursor: pointer | |
| } | |
| .common-Link:hover { | |
| color: #32325d | |
| } | |
| .common-Link:active { | |
| color: #000 | |
| } | |
| .common-Link--arrow:after { | |
| font: normal 16px StripeIcons; | |
| content: '\2192'; | |
| padding-left: 5px | |
| } | |
| .common-Uppercase.common-Link--arrow:after { | |
| content: '\279C' | |
| } | |
| .common-InvertedText .common-BodyTitle, | |
| .common-InvertedText .common-PageSubtitle, | |
| .common-InvertedText .common-PageTitle, | |
| .common-InvertedText .common-SuperTitle, | |
| .common-InvertedText .common-Uppercase, | |
| .common-InvertedText .common-UppercaseTitle { | |
| color: #fff | |
| } | |
| .common-InvertedText .common-IntroText { | |
| color: #c4f0ff | |
| } | |
| .common-InvertedText .common-BodyText { | |
| color: #9cdbff | |
| } | |
| .common-InvertedText .common-Link, | |
| .common-Link--white { | |
| color: #fff | |
| } | |
| .common-InvertedText .common-Link:hover, | |
| .common-Link--white:hover { | |
| color: #c4f0ff | |
| } | |
| .common-InvertedText .common-Link:active, | |
| .common-Link--white:active { | |
| color: #87bbfd | |
| } | |
| .common-Button { | |
| white-space: nowrap; | |
| display: inline-block; | |
| height: 40px; | |
| line-height: 40px; | |
| padding: 0 14px; | |
| box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); | |
| background: #fff; | |
| border-radius: 4px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .025em; | |
| color: #6772e5; | |
| text-decoration: none; | |
| -webkit-transition: all .15s ease; | |
| transition: all .15s ease | |
| } | |
| .common-Button:hover { | |
| color: #7795f8; | |
| -webkit-transform: translateY(-1px); | |
| transform: translateY(-1px); | |
| box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08) | |
| } | |
| .common-Button:active { | |
| color: #555abf; | |
| background-color: #f6f9fc; | |
| -webkit-transform: translateY(1px); | |
| transform: translateY(1px); | |
| box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08) | |
| } | |
| .common-Button--default { | |
| color: #fff; | |
| background: #6772e5 | |
| } | |
| .common-Button--default:hover { | |
| color: #fff; | |
| background-color: #7795f8 | |
| } | |
| .common-Button--default:active { | |
| color: #e6ebf1; | |
| background-color: #555abf | |
| } | |
| .common-Button--dark { | |
| color: #fff; | |
| background: #32325d | |
| } | |
| .common-Button--dark:hover { | |
| color: #fff; | |
| background-color: #43458b | |
| } | |
| .common-Button--dark:active { | |
| color: #e6ebf1; | |
| background-color: #32325d | |
| } | |
| .common-ButtonIcon { | |
| display: inline; | |
| margin: 0 5px 0 0; | |
| position: relative | |
| } | |
| .common-ButtonGroup { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| margin: -10px | |
| } | |
| .common-ButtonGroup .common-Button { | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| margin: 10px | |
| } | |
| .StripeBackground { | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| right: 0; | |
| -webkit-transform: skewY(-12deg); | |
| transform: skewY(-12deg); | |
| pointer-events: none | |
| } | |
| .StripeBackground .stripe { | |
| position: absolute; | |
| top: auto; | |
| left: 0; | |
| right: 0 | |
| } | |
| .StripeBackground.accelerated .stripe { | |
| will-change: transform | |
| } | |
| .StripeBackground .stripe.pattern { | |
| overflow: hidden | |
| } | |
| .StripeBackground .stripe.pattern:after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: -1000px; | |
| top: -1000px; | |
| -webkit-transform: skew(0, 12deg); | |
| transform: skew(0, 12deg) | |
| } | |
| .common-FlagIcon:before { | |
| content: ''; | |
| display: inline-block; | |
| width: 21px; | |
| height: 15px; | |
| background: url(/img/v3/common/flagIcons.svg); | |
| background-position: -258px -35px; | |
| vertical-align: -2px; | |
| margin-right: 12px | |
| } | |
| .common-FlagIcon--at:before { | |
| background-position: -10px -10px | |
| } | |
| .common-FlagIcon--au:before { | |
| background-position: -41px -10px | |
| } | |
| .common-FlagIcon--be:before { | |
| background-position: -72px -10px | |
| } | |
| .common-FlagIcon--br:before { | |
| background-position: -103px -10px | |
| } | |
| .common-FlagIcon--ca:before { | |
| background-position: -134px -10px | |
| } | |
| .common-FlagIcon--ch:before { | |
| background-position: -165px -10px | |
| } | |
| .common-FlagIcon--de:before { | |
| background-position: -196px -10px | |
| } | |
| .common-FlagIcon--dk:before { | |
| background-position: -227px -10px | |
| } | |
| .common-FlagIcon--es:before { | |
| background-position: -258px -10px | |
| } | |
| .common-FlagIcon--fi:before { | |
| background-position: -289px -10px | |
| } | |
| .common-FlagIcon--fr:before { | |
| background-position: -320px -10px | |
| } | |
| .common-FlagIcon--gb:before { | |
| background-position: -351px -10px | |
| } | |
| .common-FlagIcon--hk:before { | |
| background-position: -382px -10px | |
| } | |
| .common-FlagIcon--ie:before { | |
| background-position: -413px -10px | |
| } | |
| .common-FlagIcon--it:before { | |
| background-position: -444px -10px | |
| } | |
| .common-FlagIcon--jp:before { | |
| background-position: -475px -10px | |
| } | |
| .common-FlagIcon--lu:before { | |
| background-position: -506px -10px | |
| } | |
| .common-FlagIcon--mx:before { | |
| background-position: -10px -35px | |
| } | |
| .common-FlagIcon--nl:before { | |
| background-position: -41px -35px | |
| } | |
| .common-FlagIcon--no:before { | |
| background-position: -72px -35px | |
| } | |
| .common-FlagIcon--nz:before { | |
| background-position: -103px -35px | |
| } | |
| .common-FlagIcon--pt:before { | |
| background-position: -134px -35px | |
| } | |
| .common-FlagIcon--se:before { | |
| background-position: -165px -35px | |
| } | |
| .common-FlagIcon--sg:before { | |
| background-position: -196px -35px | |
| } | |
| .common-FlagIcon--us:before { | |
| background-position: -227px -35px | |
| } | |
| .common-FlagIcon--xx:before { | |
| background-position: -258px -35px | |
| } | |
| .globalNav { | |
| font-family: Camphor, Open Sans, Segoe UI, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| position: absolute; | |
| left: 0; | |
| top: 10px; | |
| right: 0; | |
| z-index: 500; | |
| height: 50px; | |
| padding: 0 5px; | |
| -webkit-perspective: 2000px; | |
| perspective: 2000px | |
| } | |
| @media (min-width:880px) { | |
| .globalNav { | |
| padding: 0 | |
| } | |
| } | |
| .globalNav ul { | |
| padding: 0; | |
| margin: 0 | |
| } | |
| .globalNav li { | |
| list-style: none | |
| } | |
| .globalNav a { | |
| text-decoration: none; | |
| -webkit-tap-highlight-color: transparent; | |
| color: #6772e5; | |
| -webkit-transition: color .1s; | |
| transition: color .1s | |
| } | |
| .globalNav a:hover { | |
| color: #32325d | |
| } | |
| .globalNav .contentOverlay { | |
| position: absolute; | |
| z-index: 499; | |
| left: 0; | |
| right: 0; | |
| top: -10px; | |
| height: 600px; | |
| max-height: 100vh; | |
| pointer-events: none; | |
| overflow: hidden | |
| } | |
| .globalNav .contentOverlay:before { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| width: 100vw; | |
| max-width: 1400px; | |
| top: -100px; | |
| bottom: 0; | |
| background: -webkit-radial-gradient(ellipse closest-side at 50% 50%, #32325d, rgba(50, 50, 93, .6), rgba(50, 50, 93, .3), rgba(50, 50, 93, .1), rgba(50, 50, 93, 0)) 50%/100% 100% no-repeat; | |
| background: radial-gradient(ellipse closest-side at 50% 50%, #32325d, rgba(50, 50, 93, .6), rgba(50, 50, 93, .3), rgba(50, 50, 93, .1), rgba(50, 50, 93, 0)) 50%/100% 100% no-repeat; | |
| z-index: -1; | |
| opacity: 0; | |
| -webkit-transform: translateX(-50%) translateY(-80px); | |
| transform: translateX(-50%) translateY(-80px); | |
| will-change: opacity, transform; | |
| -webkit-transition-property: opacity, -webkit-transform; | |
| transition-property: opacity, -webkit-transform; | |
| transition-property: transform, opacity; | |
| transition-property: transform, opacity, -webkit-transform; | |
| -webkit-transition-duration: .25s; | |
| transition-duration: .25s | |
| } | |
| .globalNav.overlayActive .contentOverlay:before { | |
| opacity: .4; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%) | |
| } | |
| .globalNav .navRoot { | |
| position: relative | |
| } | |
| @media (min-width:1040px) { | |
| .globalNav .navRoot { | |
| margin: 0 -5px | |
| } | |
| } | |
| .globalNav>.container-lg { | |
| padding: 0 | |
| } | |
| .globalNav .navRoot, | |
| .globalNav .navSection>ul { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .globalNav .navSection { | |
| -webkit-flex-basis: 50%; | |
| -ms-flex-preferred-size: 50%; | |
| flex-basis: 50% | |
| } | |
| .globalNav .navSection.primary { | |
| -webkit-flex-basis: auto; | |
| -ms-flex-preferred-size: auto; | |
| flex-basis: auto; | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0 | |
| } | |
| .globalNav .navSection.primary>ul { | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center | |
| } | |
| .globalNav .navSection.secondary { | |
| -webkit-box-pack: end; | |
| -webkit-justify-content: flex-end; | |
| -ms-flex-pack: end; | |
| justify-content: flex-end | |
| } | |
| .globalNav .navSection.secondary>ul { | |
| float: right | |
| } | |
| .globalNav .navSection.secondary.compact, | |
| .globalNav .navSection>ul>li { | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0 | |
| } | |
| .globalNav .navSection.secondary.compact { | |
| -webkit-flex-basis: auto; | |
| -ms-flex-preferred-size: auto; | |
| flex-basis: auto | |
| } | |
| .globalNav .rootLink { | |
| display: inline-block; | |
| padding: 0 15px; | |
| height: 50px; | |
| white-space: nowrap; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none | |
| } | |
| .globalNav .colorize { | |
| color: #6772e5; | |
| -webkit-transition: color .1s ease; | |
| transition: color .1s ease | |
| } | |
| .globalNav .colorize.active, | |
| .globalNav .colorize:hover { | |
| color: #32325d | |
| } | |
| @media (min-width:880px) { | |
| .globalNav .allowExpand .rootLink { | |
| padding: 0 20px | |
| } | |
| } | |
| @media (min-width:1040px) { | |
| .globalNav .allowExpand .rootLink { | |
| padding: 0 25px | |
| } | |
| } | |
| .globalNav .hasDropdown .rootLink { | |
| cursor: default | |
| } | |
| .globalNav .rootLink h2 { | |
| font-size: 17px; | |
| line-height: 50px; | |
| font-weight: 400; | |
| margin: 0; | |
| color: inherit | |
| } | |
| .globalNav .primary .rootLink h2 { | |
| font-weight: 500 | |
| } | |
| .globalNav .item-home h1 { | |
| line-height: 50px; | |
| font-size: 20px; | |
| margin: 0; | |
| color: inherit | |
| } | |
| .globalNav .item-home svg { | |
| vertical-align: -5px | |
| } | |
| .globalNav .item-home svg path { | |
| fill: currentColor | |
| } | |
| .globalNav .item-dashboard h2:after { | |
| font: normal 16px StripeIcons; | |
| content: '\279E'; | |
| padding-left: 5px | |
| } | |
| .globalNav .dropdownRoot { | |
| position: absolute; | |
| z-index: 1000; | |
| left: 0; | |
| right: 0; | |
| top: 50px; | |
| pointer-events: none; | |
| -webkit-transform: rotateX(-15deg); | |
| transform: rotateX(-15deg); | |
| -webkit-transform-origin: 50% -50px; | |
| transform-origin: 50% -50px; | |
| opacity: 0; | |
| will-change: transform, opacity; | |
| -webkit-transition-property: opacity, -webkit-transform; | |
| transition-property: opacity, -webkit-transform; | |
| transition-property: transform, opacity; | |
| transition-property: transform, opacity, -webkit-transform; | |
| -webkit-transition-duration: .25s; | |
| transition-duration: .25s; | |
| display: none | |
| } | |
| @media (min-width:670px) { | |
| .globalNav .dropdownRoot { | |
| display: block | |
| } | |
| } | |
| .globalNav.dropdownActive .dropdownRoot { | |
| opacity: 1; | |
| pointer-events: auto; | |
| -webkit-transform: none; | |
| transform: none | |
| } | |
| .globalNav .dropdownBackground { | |
| background: #fff; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1); | |
| width: 520px; | |
| height: 400px; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0 | |
| } | |
| .globalNav .alternateBackground, | |
| .globalNav .dropdownBackground { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| will-change: transform; | |
| -webkit-transition-property: -webkit-transform; | |
| transition-property: -webkit-transform; | |
| transition-property: transform; | |
| transition-property: transform, -webkit-transform; | |
| -webkit-transition-duration: .25s; | |
| transition-duration: .25s | |
| } | |
| .globalNav .alternateBackground { | |
| right: 0; | |
| height: 1000px; | |
| background: #f6f9fc | |
| } | |
| .globalNav .dropdownArrow { | |
| top: -6px; | |
| margin: 0 0 0 -10px; | |
| width: 12px; | |
| height: 12px; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| border-radius: 4px 0 0 0; | |
| background: #fff; | |
| box-shadow: -2px -2px 5px rgba(82, 95, 127, .08); | |
| will-change: transform; | |
| -webkit-transition-property: -webkit-transform; | |
| transition-property: -webkit-transform; | |
| transition-property: transform; | |
| transition-property: transform, -webkit-transform | |
| } | |
| .globalNav .dropdownArrow, | |
| .globalNav .dropdownContainer { | |
| position: absolute; | |
| left: 0; | |
| -webkit-transition-duration: .25s; | |
| transition-duration: .25s | |
| } | |
| .globalNav .dropdownContainer { | |
| overflow: hidden; | |
| top: 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| will-change: transform, width, height; | |
| -webkit-transition-property: width, height, -webkit-transform; | |
| transition-property: width, height, -webkit-transform; | |
| transition-property: transform, width, height; | |
| transition-property: transform, width, height, -webkit-transform | |
| } | |
| .globalNav .dropdownSection { | |
| opacity: 0; | |
| pointer-events: none; | |
| will-change: transform, opacity; | |
| -webkit-transition-property: opacity, -webkit-transform; | |
| transition-property: opacity, -webkit-transform; | |
| transition-property: transform, opacity; | |
| transition-property: transform, opacity, -webkit-transform; | |
| -webkit-transition-duration: .25s; | |
| transition-duration: .25s; | |
| background: red | |
| } | |
| .globalNav .dropdownSection.active { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| pointer-events: auto | |
| } | |
| .globalNav .dropdownSection.left { | |
| -webkit-transform: translateX(-150px); | |
| transform: translateX(-150px) | |
| } | |
| .globalNav .dropdownSection.right { | |
| -webkit-transform: translateX(150px); | |
| transform: translateX(150px) | |
| } | |
| .globalNav.noDropdownTransition .alternateBackground, | |
| .globalNav.noDropdownTransition .dropdownArrow, | |
| .globalNav.noDropdownTransition .dropdownBackground, | |
| .globalNav.noDropdownTransition .dropdownContainer, | |
| .globalNav.noDropdownTransition .dropdownSection { | |
| -webkit-transition: none; | |
| transition: none | |
| } | |
| .globalNav .dropdownContent { | |
| position: absolute; | |
| top: 0; | |
| left: 0 | |
| } | |
| .globalNav .linkGroup { | |
| padding: 20px 35px | |
| } | |
| .globalNav .linkContainer { | |
| display: block; | |
| padding: 9px 0 | |
| } | |
| .globalNav .linkTitle { | |
| color: #6772e5; | |
| font-size: 16px; | |
| line-height: 22px; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| letter-spacing: .025em | |
| } | |
| .globalNav .linkSub { | |
| font-size: 15px; | |
| line-height: 22px; | |
| color: #6b7c93; | |
| margin-top: 5px; | |
| display: block | |
| } | |
| .globalNav .linkSub, | |
| .globalNav .linkTitle { | |
| -webkit-transition: color .1s; | |
| transition: color .1s | |
| } | |
| .globalNav .linkContainer:hover .linkTitle, | |
| .globalNav .linkTitle:hover { | |
| color: #32325d | |
| } | |
| .globalNav .linkContainer:hover .linkSub { | |
| color: #424770 | |
| } | |
| .globalNav .hover-fillDark, | |
| .globalNav .hover-fillLight { | |
| -webkit-transition: fill .1s; | |
| transition: fill .1s | |
| } | |
| .globalNav .hover-strokeDark, | |
| .globalNav .hover-strokeLight { | |
| -webkit-transition: stroke .1s; | |
| transition: stroke .1s | |
| } | |
| .globalNav .linkContainer:hover .hover-fillLight { | |
| fill: #8898aa | |
| } | |
| .globalNav .linkContainer:hover .hover-fillDark { | |
| fill: #32325d | |
| } | |
| .globalNav .linkContainer:hover .hover-strokeLight { | |
| stroke: #8898aa | |
| } | |
| .globalNav .linkContainer:hover .hover-strokeDark { | |
| stroke: #32325d | |
| } | |
| .globalNav .linkIcon { | |
| white-space: nowrap | |
| } | |
| .globalNav .linkIcon svg { | |
| margin: 0 12px -3px -1px | |
| } | |
| .globalNav .withIcon { | |
| padding-left: 28px | |
| } | |
| .globalNav .withIcon .linkTitle { | |
| margin-left: -28px | |
| } | |
| .globalNav .productsGroup { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| width: 640px; | |
| margin: -5px -10px | |
| } | |
| .globalNav .productsGroup>li { | |
| -webkit-flex: 1 0 50%; | |
| -ms-flex: 1 0 50%; | |
| flex: 1 0 50% | |
| } | |
| .globalNav .productsGroup .linkContainer, | |
| .globalNav .productsGroup>li { | |
| -webkit-box-flex: 1; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .globalNav .productsGroup .linkContainer { | |
| padding: 18px 10px; | |
| -webkit-flex: 1; | |
| -ms-flex: 1; | |
| flex: 1; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center | |
| } | |
| .globalNav .productsGroup svg { | |
| width: 48px; | |
| height: 48px | |
| } | |
| .globalNav .productLinkContent { | |
| -webkit-box-flex: 1; | |
| -webkit-flex: 1; | |
| -ms-flex: 1; | |
| flex: 1; | |
| margin-left: 20px; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| min-height: 71px | |
| } | |
| .globalNav .prodsubGroup { | |
| text-align: center | |
| } | |
| .globalNav .prodsubGroup .linkContainer { | |
| display: -webkit-inline-box; | |
| display: -webkit-inline-flex; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row | |
| } | |
| .globalNav .prodsubGroup .linkSub { | |
| margin: 0 0 0 10px | |
| } | |
| .globalNav .item-subscriptions .linkTitle { | |
| color: #24b47e | |
| } | |
| .globalNav .item-connect .linkTitle { | |
| color: #3297d3 | |
| } | |
| .globalNav .item-relay .linkTitle { | |
| color: #e25950 | |
| } | |
| .globalNav .item-atlas .linkTitle { | |
| color: #e39f48 | |
| } | |
| .globalNav .documentationGroup .linkSub { | |
| max-width: 250px | |
| } | |
| .globalNav .documentationArticles { | |
| font-size: 15px; | |
| line-height: 26px; | |
| margin: 15px 20px 10px 28px; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| white-space: nowrap | |
| } | |
| .globalNav .documentationArticles>ul { | |
| margin-right: 40px | |
| } | |
| .globalNav .documentationArticles>ul:last-child { | |
| margin-right: 0 | |
| } | |
| .globalNav .documentationArticles h4 { | |
| font-size: 14px; | |
| line-height: 22px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: .025em; | |
| margin: 0 0 3px; | |
| color: #8898aa | |
| } | |
| .globalNav .blogPosts { | |
| margin: 5px 5px 12px 28px | |
| } | |
| .globalNav .blogPosts a { | |
| font-size: 15px; | |
| margin-top: 10px; | |
| display: block; | |
| white-space: nowrap; | |
| position: relative | |
| } | |
| .globalNav .blogPosts a:after { | |
| content: '\27A2'; | |
| font: normal 16px StripeIcons; | |
| margin-left: 6px; | |
| vertical-align: -3px | |
| } | |
| .globalNav .blogPosts a.fresh { | |
| font-weight: 500 | |
| } | |
| .globalNav .blogPosts a.fresh:before { | |
| content: ''; | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| left: -19px; | |
| top: 7px | |
| } | |
| .globalNav .blogPosts span { | |
| line-height: 22px; | |
| display: inline-block; | |
| white-space: nowrap; | |
| max-width: 300px; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| vertical-align: top | |
| } | |
| .globalNav .navSection.primary, | |
| .globalNav .navSection.secondary { | |
| display: none | |
| } | |
| @media (min-width:670px) { | |
| .globalNav .navSection.primary, | |
| .globalNav .navSection.secondary { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| } | |
| .globalNav .navSection.mobile { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: end; | |
| -webkit-justify-content: flex-end; | |
| -ms-flex-pack: end; | |
| justify-content: flex-end | |
| } | |
| @media (min-width:670px) { | |
| .globalNav .navSection.mobile { | |
| display: none | |
| } | |
| } | |
| .globalNav .navSection.mobile .rootLink { | |
| cursor: pointer; | |
| width: 50px; | |
| height: 50px; | |
| position: relative | |
| } | |
| .globalNav .navSection.mobile .rootLink h2, | |
| .globalNav .navSection.mobile .rootLink h2:after, | |
| .globalNav .navSection.mobile .rootLink h2:before { | |
| position: absolute; | |
| width: 24px; | |
| height: 3px; | |
| border-radius: 1px; | |
| background: currentColor | |
| } | |
| .globalNav .navSection.mobile .rootLink h2 { | |
| font-size: 0; | |
| left: 13px; | |
| top: 23px | |
| } | |
| .globalNav .navSection.mobile .rootLink h2:after, | |
| .globalNav .navSection.mobile .rootLink h2:before { | |
| content: ''; | |
| left: 0 | |
| } | |
| .globalNav .navSection.mobile .rootLink h2:before { | |
| top: -9px | |
| } | |
| .globalNav .navSection.mobile .rootLink h2:after { | |
| top: 9px | |
| } | |
| .globalNav .popup { | |
| position: absolute; | |
| left: 10px; | |
| top: 5px; | |
| right: 10px; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: end; | |
| -webkit-justify-content: flex-end; | |
| -ms-flex-pack: end; | |
| justify-content: flex-end; | |
| pointer-events: none; | |
| -webkit-perspective: 2000px; | |
| perspective: 2000px | |
| } | |
| .globalNav .popupContainer { | |
| background: #fff; | |
| box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| position: relative; | |
| font-size: 17px; | |
| line-height: 40px; | |
| white-space: nowrap; | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -webkit-transform: rotate3d(1, 1, 0, -15deg); | |
| transform: rotate3d(1, 1, 0, -15deg); | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| opacity: 0; | |
| will-change: transform, opacity; | |
| -webkit-transition-property: opacity, -webkit-transform; | |
| transition-property: opacity, -webkit-transform; | |
| transition-property: transform, opacity; | |
| transition-property: transform, opacity, -webkit-transform; | |
| -webkit-transition-duration: .25s; | |
| transition-duration: .25s | |
| } | |
| .globalNav .navSection.mobile.globalPopupActive .popupContainer { | |
| -webkit-transform: none; | |
| transform: none; | |
| opacity: 1; | |
| pointer-events: auto | |
| } | |
| .globalNav .popup a { | |
| display: block | |
| } | |
| .globalNav .popupCloseButton { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| width: 51px; | |
| height: 51px; | |
| font-size: 0; | |
| cursor: pointer | |
| } | |
| .globalNav .popupCloseButton:after, | |
| .globalNav .popupCloseButton:before { | |
| content: ''; | |
| position: absolute; | |
| background: #6772e5; | |
| border-radius: 1px; | |
| left: 14px; | |
| right: 14px; | |
| top: 24px; | |
| height: 3px; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| -webkit-transition: background .1s; | |
| transition: background .1s | |
| } | |
| .globalNav .popupCloseButton:after { | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg) | |
| } | |
| .globalNav .popupCloseButton:hover:after, | |
| .globalNav .popupCloseButton:hover:before { | |
| background: #32325d | |
| } | |
| .globalNav .mobileSignIn { | |
| background: #f6f9fc; | |
| display: block; | |
| padding: 12px 30px; | |
| font-weight: 600 | |
| } | |
| .globalNav .mobileSignIn:after { | |
| font: normal 16px StripeIcons; | |
| content: '\279C'; | |
| margin-left: 6px | |
| } | |
| .globalNav .mobileProducts { | |
| padding: 20px 0 15px | |
| } | |
| .globalNav .mobileProducts h4 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| letter-spacing: .025em; | |
| color: #8898aa; | |
| text-transform: uppercase; | |
| margin: -5px 0 0 30px | |
| } | |
| .globalNav .mobileProductsList { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap | |
| } | |
| .globalNav .mobileProductsList>ul { | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1 | |
| } | |
| .globalNav .mobileProductsList>ul:last-child { | |
| -webkit-box-flex: 3; | |
| -webkit-flex-grow: 3; | |
| -ms-flex-positive: 3; | |
| flex-grow: 3 | |
| } | |
| .globalNav .mobileProductsList a { | |
| padding: 0 30px; | |
| font-size: 20px; | |
| font-weight: 500; | |
| line-height: 50px | |
| } | |
| .globalNav .mobileProductsList a:hover { | |
| color: #32325d | |
| } | |
| .globalNav .mobileProductsList a svg { | |
| display: inline-block; | |
| width: 26px; | |
| height: 26px; | |
| margin: 0 15px 0 -3px; | |
| vertical-align: -5px | |
| } | |
| .globalNav .mobileProductsList .item-subscriptions { | |
| color: #24b47e | |
| } | |
| .globalNav .mobileProductsList .item-connect { | |
| color: #3297d3 | |
| } | |
| .globalNav .mobileProductsList .item-relay { | |
| color: #e25950 | |
| } | |
| .globalNav .mobileProductsList .item-atlas { | |
| color: #e39f48 | |
| } | |
| .globalNav .mobileSecondaryNav { | |
| border-top: 2px solid #f6f9fc; | |
| padding: 15px 10px; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap | |
| } | |
| .globalNav .mobileSecondaryNav>ul { | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1 | |
| } | |
| .globalNav .mobileSecondaryNav>ul:last-child { | |
| -webkit-box-flex: 3; | |
| -webkit-flex-grow: 3; | |
| -ms-flex-positive: 3; | |
| flex-grow: 3 | |
| } | |
| .globalNav .mobileSecondaryNav a { | |
| padding: 0 20px; | |
| min-width: 100px | |
| } | |
| .globalFooter { | |
| font-family: Camphor, Open Sans, Segoe UI, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| background: #f6f9fc; | |
| position: relative | |
| } | |
| .globalFooter.withCards { | |
| background: transparent; | |
| overflow: hidden; | |
| padding-top: 500px; | |
| margin-top: -480px; | |
| pointer-events: none | |
| } | |
| .globalFooter.withCards>* { | |
| pointer-events: auto; | |
| position: relative | |
| } | |
| .globalFooter.withCards:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 600px; | |
| height: 2000px; | |
| background: #f6f9fc; | |
| -webkit-transform: skew(0, -12deg); | |
| transform: skew(0, -12deg) | |
| } | |
| .globalFooterCards .container-xl { | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| margin: -15px auto; | |
| padding: 0 5px | |
| } | |
| .globalFooterCards .container-xl, | |
| a.globalFooterCard { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| a.globalFooterCard { | |
| -webkit-box-flex: 1; | |
| -webkit-flex: 1 1 100%; | |
| -ms-flex: 1 1 100%; | |
| flex: 1 1 100%; | |
| margin: 15px; | |
| z-index: 501; | |
| position: relative; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| padding: 40px 40px 40px 120px; | |
| background-color: #fff; | |
| border-radius: 4px; | |
| box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07); | |
| -webkit-transition-property: color, background-color, box-shadow, -webkit-transform; | |
| transition-property: color, background-color, box-shadow, -webkit-transform; | |
| transition-property: color, background-color, box-shadow, transform; | |
| transition-property: color, background-color, box-shadow, transform, -webkit-transform; | |
| -webkit-transition-duration: .15s; | |
| transition-duration: .15s | |
| } | |
| a.globalFooterCard:after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: #aab7c4; | |
| pointer-events: none; | |
| opacity: 0; | |
| -webkit-transition: opacity .15s; | |
| transition: opacity .15s | |
| } | |
| @media (min-width:670px) { | |
| a.globalFooterCard { | |
| -webkit-flex-basis: 1%; | |
| -ms-flex-preferred-size: 1%; | |
| flex-basis: 1%; | |
| padding-left: 100px | |
| } | |
| } | |
| @media (min-width:880px) { | |
| a.globalFooterCard { | |
| padding-left: 120px | |
| } | |
| } | |
| a.globalFooterCard:hover { | |
| color: #32325d!important; | |
| -webkit-transform: translateY(-2px); | |
| transform: translateY(-2px); | |
| box-shadow: 0 18px 35px rgba(50, 50, 93, .1), 0 8px 15px rgba(0, 0, 0, .07) | |
| } | |
| a.globalFooterCard:active { | |
| -webkit-transform: translateY(2px); | |
| transform: translateY(2px); | |
| box-shadow: 0 11px 20px rgba(50, 50, 93, .1), 0 6px 11px rgba(0, 0, 0, .08) | |
| } | |
| a.globalFooterCard:active:after { | |
| opacity: .15 | |
| } | |
| a.globalFooterCard img, | |
| a.globalFooterCard svg { | |
| position: absolute; | |
| width: 130px; | |
| height: 130px; | |
| left: -35px; | |
| top: calc(50% - 65px) | |
| } | |
| @media (min-width:670px) { | |
| a.globalFooterCard img, | |
| a.globalFooterCard svg { | |
| left: -50px | |
| } | |
| } | |
| @media (min-width:880px) { | |
| a.globalFooterCard img, | |
| a.globalFooterCard svg { | |
| left: -35px | |
| } | |
| } | |
| a.globalFooterCard svg .hover-fillDark, | |
| a.globalFooterCard svg .hover-fillLight { | |
| -webkit-transition: fill .15s; | |
| transition: fill .15s | |
| } | |
| a.globalFooterCard svg .hover-strokeDark, | |
| a.globalFooterCard svg .hover-strokeLight { | |
| -webkit-transition: stroke .15s; | |
| transition: stroke .15s | |
| } | |
| a.globalFooterCard:hover svg .hover-fillDark { | |
| fill: #32325d | |
| } | |
| a.globalFooterCard:hover svg .hover-fillLight { | |
| fill: #8898aa | |
| } | |
| a.globalFooterCard:hover svg .hover-strokeDark { | |
| stroke: #32325d | |
| } | |
| a.globalFooterCard:hover svg .hover-strokeLight { | |
| stroke: #8898aa | |
| } | |
| a.globalFooterCard h2 { | |
| margin: 0 0 5px; | |
| white-space: normal | |
| } | |
| a.globalFooterCard p { | |
| margin: 5px 0 0 | |
| } | |
| a.globalFooterCard.card-pricing { | |
| color: #24b47e | |
| } | |
| a.globalFooterCard.card-documentation { | |
| color: #b76ac4 | |
| } | |
| a.globalFooterCard.card-subscriptions { | |
| color: #24b47e | |
| } | |
| a.globalFooterCard.card-connect { | |
| color: #3297d3 | |
| } | |
| a.globalFooterCard.card-relay { | |
| color: #e25950 | |
| } | |
| a.globalFooterCard.card-atlas { | |
| color: #e39f48 | |
| } | |
| .globalFooterCTA { | |
| padding: 50px 0; | |
| border-bottom: 2px solid rgba(207, 215, 223, .25) | |
| } | |
| @media (min-width:670px) { | |
| .globalFooterCTA .container-lg { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center | |
| } | |
| } | |
| .globalFooterCTA .buttons, | |
| .globalFooterCTA .content { | |
| -webkit-box-flex: 1; | |
| -webkit-flex: 1 0 50%; | |
| -ms-flex: 1 0 50%; | |
| flex: 1 0 50% | |
| } | |
| .globalFooterCTA .title { | |
| font-weight: 400; | |
| font-size: 30px; | |
| line-height: 45px; | |
| color: #32325d; | |
| margin: .75em 0 | |
| } | |
| .globalFooterCTA .subtitle { | |
| font-weight: 300; | |
| color: #6772e5; | |
| display: block | |
| } | |
| @media (min-width:670px) { | |
| .globalFooterCTA .common-ButtonGroup { | |
| -webkit-box-pack: end; | |
| -webkit-justify-content: flex-end; | |
| -ms-flex-pack: end; | |
| justify-content: flex-end | |
| } | |
| } | |
| .globalFooterNav { | |
| padding: 65px 0 55px; | |
| color: #8898aa; | |
| line-height: 30px; | |
| font-size: 15px; | |
| white-space: nowrap | |
| } | |
| .globalFooterNav ul { | |
| padding: 0; | |
| margin: 0 | |
| } | |
| .globalFooterNav li { | |
| list-style: none | |
| } | |
| .globalFooterNav .container-lg { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap | |
| } | |
| @media (min-width:880px) { | |
| .globalFooterNav .container-lg { | |
| -webkit-flex-wrap: nowrap; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap | |
| } | |
| } | |
| .globalFooterNav a { | |
| text-decoration: none; | |
| color: inherit; | |
| -webkit-transition: color .1s; | |
| transition: color .1s | |
| } | |
| .globalFooterNav a:hover { | |
| color: #32325d | |
| } | |
| .globalFooterNav .metaNav { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-box-flex: 2; | |
| -webkit-flex-grow: 2; | |
| -ms-flex-positive: 2; | |
| flex-grow: 2; | |
| -webkit-flex-basis: 100%; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| margin-bottom: 20px | |
| } | |
| @media (min-width:880px) { | |
| .globalFooterNav .metaNav { | |
| -webkit-flex-basis: auto; | |
| -ms-flex-preferred-size: auto; | |
| flex-basis: auto; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| margin: 0 0 20px | |
| } | |
| } | |
| .globalFooterNav .metaNav>li { | |
| margin-right: 20px | |
| } | |
| .globalFooterNav .metaNav .select { | |
| position: relative; | |
| -webkit-perspective: 2000px; | |
| perspective: 2000px; | |
| z-index: 501 | |
| } | |
| .globalFooterNav .metaNav .rootLink { | |
| color: #6772e5; | |
| font-weight: 600; | |
| cursor: pointer | |
| } | |
| .globalFooterNav .metaNav .rootLink:hover { | |
| color: #32325d | |
| } | |
| .globalFooterNav .metaNav .rootLink svg { | |
| display: inline-block; | |
| vertical-align: -1px; | |
| margin: 0 7px 0 -2px | |
| } | |
| .globalFooterNav .metaNav .rootLink svg path { | |
| fill: currentColor | |
| } | |
| .globalFooterNav .metaNav .select.globalPopupActive .rootLink { | |
| color: #32325d | |
| } | |
| @media (min-width:880px) { | |
| .globalFooterNav .metaNav .country { | |
| margin-bottom: 5px | |
| } | |
| } | |
| .globalFooterNav .metaNav .space { | |
| -webkit-box-flex: 2; | |
| -webkit-flex-grow: 2; | |
| -ms-flex-positive: 2; | |
| flex-grow: 2 | |
| } | |
| .globalFooterNav .metaNav .copyright { | |
| margin-right: 0; | |
| color: #cfd7df | |
| } | |
| .globalFooterNav .siteNav { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -webkit-box-pack: justify; | |
| -webkit-justify-content: space-between; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between | |
| } | |
| @media (min-width:670px) { | |
| .globalFooterNav .siteNav { | |
| -webkit-flex-wrap: nowrap; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap | |
| } | |
| } | |
| @media (min-width:880px) { | |
| .globalFooterNav .siteNav { | |
| -webkit-box-flex: 0; | |
| -webkit-flex-grow: 0; | |
| -ms-flex-positive: 0; | |
| flex-grow: 0 | |
| } | |
| } | |
| .globalFooterNav .siteNav .column { | |
| -webkit-flex-basis: 50%; | |
| -ms-flex-preferred-size: 50%; | |
| flex-basis: 50%; | |
| margin-bottom: 20px | |
| } | |
| @media (min-width:670px) { | |
| .globalFooterNav .siteNav .column { | |
| -webkit-flex-basis: auto!important; | |
| -ms-flex-preferred-size: auto!important; | |
| flex-basis: auto!important; | |
| margin-right: 40px | |
| } | |
| } | |
| @media (min-width:880px) { | |
| .globalFooterNav .siteNav .column { | |
| margin-right: 30px | |
| } | |
| } | |
| @media (min-width:1040px) { | |
| .globalFooterNav .siteNav .column { | |
| margin-right: 40px | |
| } | |
| } | |
| .globalFooterNav .siteNav .column:last-child { | |
| margin-right: 0 | |
| } | |
| .globalFooterNav .siteNav .splitColumn { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap | |
| } | |
| .globalFooterNav .siteNav li { | |
| margin-right: 40px | |
| } | |
| .globalFooterNav .siteNav .column:last-child li { | |
| margin-right: 0 | |
| } | |
| .globalFooterNav .siteNav h4 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .025em; | |
| margin: 0 0 5px | |
| } | |
| .globalFooterNav .siteNav strong { | |
| font-weight: 500 | |
| } | |
| .globalFooterNav .popup { | |
| position: absolute; | |
| bottom: 40px; | |
| left: -5px; | |
| z-index: 1000; | |
| font-size: 15px; | |
| line-height: 26px; | |
| background: #fff; | |
| border-radius: 4px; | |
| box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1); | |
| pointer-events: none; | |
| -webkit-transform: rotate3d(1, 1, 0, 15deg); | |
| transform: rotate3d(1, 1, 0, 15deg); | |
| -webkit-transform-origin: 0 100%; | |
| transform-origin: 0 100%; | |
| opacity: 0; | |
| will-change: transform, opacity; | |
| -webkit-transition-property: opacity, -webkit-transform; | |
| transition-property: opacity, -webkit-transform; | |
| transition-property: transform, opacity; | |
| transition-property: transform, opacity, -webkit-transform; | |
| -webkit-transition-duration: .25s; | |
| transition-duration: .25s | |
| } | |
| @media (min-width:1160px) { | |
| .globalFooterNav .popup { | |
| left: -65px | |
| } | |
| } | |
| .globalFooterNav .popup:before { | |
| content: ''; | |
| position: absolute; | |
| bottom: -6px; | |
| left: 30px; | |
| width: 20px; | |
| height: 20px; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| border-radius: 20px 0 3px 0; | |
| background: #fff | |
| } | |
| @media (min-width:1160px) { | |
| .globalFooterNav .popup:before { | |
| left: 60px | |
| } | |
| } | |
| .globalFooterNav .globalPopupActive .popup { | |
| -webkit-transform: none; | |
| transform: none; | |
| opacity: 1; | |
| pointer-events: auto | |
| } | |
| .globalFooterNav .optionList { | |
| color: #525f7f; | |
| white-space: nowrap | |
| } | |
| .globalFooterNav .optionList a { | |
| border-radius: 4px; | |
| display: block; | |
| line-height: 36px; | |
| padding: 0 15px; | |
| -webkit-transition: color .1s, background-color .1s; | |
| transition: color .1s, background-color .1s | |
| } | |
| .globalFooterNav .optionList a:hover { | |
| background-color: #f6f9fc; | |
| color: #32325d | |
| } | |
| .globalFooterNav .optionList a:active { | |
| background-color: #e6ebf1 | |
| } | |
| .globalFooterNav .optionList .selected { | |
| font-weight: 600; | |
| color: #32325d | |
| } | |
| .globalFooterNav .optionList .selected>span:before { | |
| content: ''; | |
| display: inline-block; | |
| width: 14px; | |
| height: 14px; | |
| vertical-align: -2px; | |
| margin: 0 6px 0 -2px; | |
| background: url(/img/v3/common/footer/select/checkmark.svg) | |
| } | |
| .globalFooterNav .badge { | |
| font-size: 10px; | |
| line-height: 10px; | |
| color: #aab7c4; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .025em; | |
| font-style: normal; | |
| padding: 2px 3px 1px; | |
| border-radius: 4px; | |
| border: 1px solid #e6ebf1; | |
| display: inline-block; | |
| vertical-align: 1px; | |
| margin-left: 8px | |
| } | |
| .globalFooterNav .languagePicker { | |
| padding: 10px 5px | |
| } | |
| .globalFooterNav .countryPicker { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column | |
| } | |
| .globalFooterNav .countryPicker:before { | |
| background: #f6f9fc | |
| } | |
| @media (min-width:670px) { | |
| .globalFooterNav .countryPicker { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row | |
| } | |
| .globalFooterNav .countryPicker:before { | |
| background: #fff | |
| } | |
| } | |
| .globalFooterNav .columns, | |
| .globalFooterNav .sidebar { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .globalFooterNav .sidebar { | |
| background: #f6f9fc; | |
| border-radius: 0 0 5px 5px; | |
| overflow: hidden; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column | |
| } | |
| @media (min-width:670px) { | |
| .globalFooterNav .sidebar { | |
| border-radius: 0 5px 5px 0 | |
| } | |
| } | |
| .globalFooterNav .sidebar .optionList a:hover { | |
| background-color: rgba(230, 235, 241, .5) | |
| } | |
| .globalFooterNav .sidebar .optionList a:active { | |
| background-color: rgba(207, 215, 223, .5) | |
| } | |
| .globalFooterNav .countryList { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| padding: 25px; | |
| -webkit-box-flex: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1 | |
| } | |
| .globalFooterNav .countryList h4 { | |
| margin: 0 0 5px | |
| } | |
| .globalFooterNav .countryList h4 a { | |
| line-height: 36px; | |
| padding: 0 15px; | |
| text-transform: uppercase; | |
| color: #6772e5; | |
| font-size: 14px; | |
| font-weight: 600; | |
| letter-spacing: .025em | |
| } | |
| .globalFooterNav .countryList h4 a:hover { | |
| color: #32325d | |
| } | |
| .globalFooterNav .countryList h4 a:after { | |
| font: normal 16px StripeIcons; | |
| content: '\2192'; | |
| margin-left: 6px | |
| } | |
| .globalFooterNav .globalLink { | |
| border-top: 2px solid #fff; | |
| padding: 30px 40px | |
| } | |
| .globalFooterNav .globalLink:hover { | |
| color: #424770 | |
| } | |
| .globalFooterNav .globalLink:hover strong { | |
| color: #32325d | |
| } | |
| .globalFooterNav .globalLink strong { | |
| display: block; | |
| color: #6772e5; | |
| font-weight: 500; | |
| -webkit-transition: color .1s; | |
| transition: color .1s | |
| } | |
| .globalFooterNav .globalLink strong:after { | |
| font: normal 16px StripeIcons; | |
| content: '\2192'; | |
| margin-left: 6px | |
| } | |
| .common-Button { | |
| white-space: nowrap; | |
| display: inline-block; | |
| height: 40px; | |
| line-height: 40px; | |
| padding: 0 14px; | |
| box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); | |
| background: #fff; | |
| border-radius: 4px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .025em; | |
| color: #6772e5; | |
| text-decoration: none; | |
| -webkit-transition: all .15s ease; | |
| transition: all .15s ease; | |
| } | |
| .content { | |
| width: 1360px; | |
| display: block; | |
| position: relative; | |
| top: 200px; | |
| left: 25%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment