@import url('https://fonts.googleapis.com/css?family=Karla'); body { font-family: 'Karla', sans-serif; } .content-body .magic-block-parameters .block-parameters-table .tr, .content-body .magic-block-parameters .block-parameters-table .td, .content-body .magic-block-parameters .block-parameters-table .th { border: .5px solid #ccc; vertical-align: middle; } .content-body .magic-block-parameters .block-parameters-table .tr p span.highlighted-type, .content-body .magic-block-parameters .block-parameters-table .td span.highlighted-type, .content-body .magic-block-parameters .block-parameters-table .th span.highlighted-type { color: #c7254e; background-color: #f9f2f4; border-radius: 4px; white-space: nowrap; padding: 5px 8px; } .theme-solid header#hub-header #header-top { background-color: #ffffff; } header#hub-header #header-top #header-logo { width: 218px; height: 35px; } #hub-header { position: relative !important; background-color: transparent !important; } #header-top { background-image: none !important; height: 60px !important; } #header-top .hub-container { max-width: 1100px !important; } #hub-landing-top { padding: 0 !important; } @media (max-width: 768px) { #header-top { height: 60px; } body.hub-suggested-edits #hub-subheader-parent #hub-subheader { height: 80px; } } p { line-height: inherit; } #header-nav-left { line-height: 50px; } #header-nav-right { line-height: 50px; } ul { margin-bottom: 0 !important; } nav { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ justify-content: space-between; align-items: center; font-family: 'Karla', sans-serif; } /*CODE TO RED FROM NEEL */ p code { color: #c7254e; } div#hub-landing-top.hub-landing-none { // display: none; } .hub-is-home .hub-container { max-width: none; } #hub-landing-page { margin-top: 0; } #hub-landing-page .row { padding: 0; } #hub-landing-page img { max-width: none; max-height: none; } #header-nav-right > li > a { font-family: 'Karla', sans-serif; height: 40px !important; border: none !important; border-radius: 4px !important; text-transform: uppercase !important; font-weight: 600 !important; color: white !important; font-size: 16px !important; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.19) !important; outline: none !important; padding: 10px !important; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1) !important; display: block !important; text-align: center !important; background-color: #50D4A4 !important; opacity: 1 !important !important; line-height: 20px !important; font-weight: 200 !important; } #header-nav-right > li > a:active { -webkit-transform: translateY(-1%) !important; /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-1%) !important; /* IE 9 */ transform: translateY(-1%) !important; /* IE 10, Fx 16+, Op 12.1+ */ box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.19) !important; } #header-nav-right > li > a:hover { text-decoration: none !important; cursor: pointer !important; color: white !important; background-color: #2FBA8E !important; } .dev-portal { padding: 100px 15px; font-family: 'Karla', sans-serif; } @media (max-width: 768px) { .dev-portal { padding: 60px 0; } } .default-shadow { box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.10);} .text__size-huge { font-size: 50px; } .text__size-large { font-size: 30px; } .text__size-normal { font-size: 20px; } .text__size-small { font-size: 16px; } .text__color-gray-normal { color: #4D4D4D; opacity: .7; } .text__color-gray-dark { color: #4D4D4D; opacity: 1; } .text__color-pink-normal { color: #F65487; opacity: .7; } .text__color-pink-dark { color: #F65487; opacity: 1; } @media (max-width: 768px) { .text__size-huge { font-size: 25px; } .text__size-large { font-size: 20px; } .text__size-normal { font-size: 16px; } .text__size-small { font-size: 16px; } } .bold { font-weight: 600; } .no-padding { padding: 0 !important; } .easyship-button { height: 40px; border: none; border-radius: 4px; text-transform: uppercase; font-weight: 600; color: white; font-size: 16px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.19); outline: none; padding: 10px; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); display: block; text-align: center; } .easyship-button:active { -webkit-transform: translateY(-1%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-1%); /* IE 9 */ transform: translateY(-1%); /* IE 10, Fx 16+, Op 12.1+ */ box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.19); } .easyship-button:hover { text-decoration: none; cursor: pointer; color: white; } .button-normal { width: 180px; } .button-normal.dynamic { width: auto; display: inline-block; padding: 10px 25px; } #hub-reference .hub-reference .hub-reference-section .hub-reference-left .param-item .arrayEditJSON { background-color: #fff; margin-left: 0px; margin-top: 10px; padding: 10px; border-radius: 5px; border: 1px solid #000; color: #000 !important; } .button-pink { background-color: #F65487; } .button-blue { background-color: #4D70B0; } .easyship-button.button-white:hover { color: #4D70B0 !important; } .button-white { background-color: #FAFAFA; color: #4D70B0; } .button-center { margin: 0 auto; } .dev-portal__landing__banner { height: 850px; background-image: url(https://files.readme.io/e7a222b-Banner3x.png); background-size: cover; background-position: center center; background-repeat: no-repeat; } .dev-portal__landing__banner__graphic { position: relative; } .dev-portal__landing__banner__graphic > img { position: absolute; top: 30px; right: 50px; height: 700px; width: auto; } .dev-portal__landing__banner p { margin: 30px 0 50px; } @media (min-width: 768px) and (max-width: 991px) { .dev-portal__landing__banner { height: 600px; } } @media (max-width: 991px) { .dev-portal__landing__banner__graphic > img { display: none; } } @media (max-width: 768px) { .dev-portal__landing__banner { height: 500px; text-align: center; } .dev-portal__landing__banner .easyship-button { margin: 0 auto; } } .dev-portal__landing__usps { padding-top: 0; position: relative; min-height: 450px; } .dev-portal__landing__usps > .container { position: relative; width: 100%; max-width: 1100px; } @media (min-width: 991px) { .dev-portal__landing__usps > .container { position: absolute; left: 50%; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateX(-50%); /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ top: -80px; } } .circle-usp { height: 100px; width: 100px; border-radius: 50%; background-color: #F65487; background-position: center; background-repeat: no-repeat; background-size: 60%; } .dev-portal__landing__usp { margin-bottom: 30px; } .dev-portal__landing__usp:first-child .circle-usp { background-size: 50%; background-image: url(https://s3.amazonaws.com/easyship-storage/developer-portal-assets/icon-bag-white.svg); } .dev-portal__landing__usp:nth-child(2) .circle-usp { background-image: url(https://s3.amazonaws.com/easyship-storage/developer-portal-assets/icon-code-white.svg); } .dev-portal__landing__usp:last-child .circle-usp { background-image: url(https://s3.amazonaws.com/easyship-storage/developer-portal-assets/icon-sync-white.svg); } .dev-portal__landing__usp h2 { margin: 30px 0 20px; } @media (max-width: 768px) { .dev-portal { padding: 60px 0; } .dev-portal__landing__usps { text-align: center; padding: 0 20px; } .dev-portal__landing__usps > .container { position: relative; left: 50%; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateX(-50%); /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ top: -80px; padding: 0 50px; } .dev-portal__landing__usps .circle-usp { margin: 0 auto; } .dev-portal__landing__usp { margin-top: 20px; } .dev-portal__landing__usp p { text-align: justify; } .circle-usp { height: 60px; width: 60px; } } .dev-portal__landing__apis { background-color: #FAFAFA; min-height: 800px; overflow: hidden; } .dev-portal__landing__apis > .container > .row > div:first-child > .row { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ } .dev-portal__landing__api { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ align-items: center; margin-bottom: 50px; } .dev-portal__landing__api > img { max-width: 60px; } .dev-portal__landing__api > div { margin-left: 25px; } .dev-portal__landing__api > div > p { max-width: 230px; } .dev-portal__landing__apis__img > div { height: 100%; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ align-items: center; } .dev-portal__landing__apis__img img { height: 500px; width: auto; } @media (max-width: 991px) { .dev-portal__landing__apis__img { display: none; } } @media (max-width: 768px) { .dev-portal__landing__apis__list > div { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ flex-direction: column; align-items: center; padding: 0 10px; } .dev-portal__landing__api { margin-bottom: 20px; } } .dev-portal__landing__code { min-height: 800px; overflow: hidden; } .dev-portal__landing__code__content { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ flex-direction: row; justify-content: flex-start; align-items: center; margin-top: 50px; } .dev-portal__landing__code__example { min-width: 560px; height: 350px; background-color: white; border-radius: 8px; position: relative; } .dev-portal__landing__code__example:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40px; background-color: #F65487; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .dev-portal__landing__code__ctas { margin-left: 40px; } .dev-portal__landing__code__ctas p { max-width: 260px; margin: 0 0 50px 0; } .dev-portal__landing__code__ctas > div > a { margin-bottom: 30px; } .dev-portal__landing__code__example > div { padding-left: 70px; } .dev-portal__landing__code__example > div > p { margin: 0; display: inline; } @media (max-width: 768px) { .dev-portal__landing__code__example { width: 100%; min-width: 320px; } .dev-portal__landing__code__example:before { width: 20px; } .dev-portal__landing__code__example > div { padding-left: 35px; } } @media (max-width: 991px) { .dev-portal__landing__code__title { padding: 0 10px; } .dev-portal__landing__code__content { flex-direction: column; padding: 0 30px; } .dev-portal__landing__code__example { min-width: none; } .dev-portal__landing__code__ctas p { max-width: none; margin: 30px 0 50px 0; } .dev-portal__landing__code__ctas { margin: 0 auto; } .dev-portal__landing__code__ctas > div > a { text-align: center; display: block; margin: 0 auto 30px; } } /* Section 1A - Banner Section */ .dev-portal__user-case__banner__title { padding: 0 20px; } .dev-portal__user-case__banner__title > h1 { width: 100%; } .dev-portal__user-case__banner__content > div:nth-child(1) > img { width: 100%; } .dev-portal__user-case__banner > .container { background-image: url(https://files.readme.io/21d99f7-background-main.png); background-size: contain; background-position: center center; background-repeat: no-repeat; } @media (min-width: 768px) { .dev-portal__user-case__banner { height: 920px; } } .dev-portal__user-case__banner__content > div:nth-child(2) > div { margin-top: 50px; } @media (min-width: 1024px) { .dev-portal__user-case__banner__content > div:nth-child(2) > div { margin-top: 200px; } } .dev-portal__user-case__banner__content > div > div > h2 { margin-bottom: 30px; } @media (max-width: 768px) { .dev-portal__user-case__banner { height: 1040px; padding-bottom: 0; } .dev-portal__user-case__banner__content > div > img { display: block; margin: auto; width: 100%; max-width: 350px; } .dev-portal__user-case__banner__content > div > div { padding: 0 40px; } .dev-portal__user-case__banner__content > div > div > h2 { margin-top: 30px; } } /* Section 1B - Selling Points Section */ .dev-portal__user-case__point { margin-top: -150px; } @media only screen and (min-width: 64em) { .dev-portal__user-case__point .container { width: 60rem; } } @media (min-width: 768px) and (max-width: 1024px) { .dev-portal__user-case__point { margin-top: -300px; } } @media (min-width: 480px) and (max-width: 768px) { .dev-portal__user-case__point { margin-top: -70px; } } @media (max-width: 479px) { .dev-portal__user-case__point { margin-top: 10px; } } .dev-portal__user-case__point__img { margin-bottom: 30px; } .dev-portal__user-case__point__img > .circle-usp { margin-bottom: 30px; background-position: center; background-repeat: no-repeat; } .dev-portal__user-case__point__img:nth-child(1) > .circle-usp { background-image: url(https://files.readme.io/190db45-pen-min.png); background-size: 33%; } .dev-portal__user-case__point__img:nth-child(2) > .circle-usp { background-image: url(https://files.readme.io/f15e211-arrow-min.png); } .dev-portal__user-case__point__img:nth-child(3) > .circle-usp { background-image: url(https://files.readme.io/0019888-pickup-truck-min.png); } @media (max-width: 768px) { .dev-portal__user-case__point { padding-top: 0; } .dev-portal__user-case__point > .container { padding: 0 50px; } } /* Section 2 - Platforms */ .dev-portal__user-case__content-container > div > h2 { margin: 0; } .circle-platform { height: 100px; min-width: 100px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; } .dev-portal__user-case__platform__images > div { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ justify-content: space-around; } .dev-portal__user-case__platform__images > div > div:first-child { background-image: url(https://files.readme.io/4cdd415-magento-tiny.png); background-size: 50%; } .dev-portal__user-case__platform__images > div > div:nth-child(2) { background-image: url(https://files.readme.io/0fa831c-shopify-tiny.png); background-size: 50%; } .dev-portal__user-case__platform__images > div > div:last-child { background-image: url(https://files.readme.io/cb19d92-woocommerce-tiny.png); background-size: 70%; } @media (max-width: 768px) { .dev-portal__user-case__content-container { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ flex-direction: column-reverse; } .dev-portal__user-case__content-container > div:last-child { margin-bottom: 30px; } .dev-portal__user-case__content-container > div:first-child > h2 { text-align: center; } .dev-portal__user-case__platform__images > div { justify-content: center; } .dev-portal__user-case__platform__images > div > div { margin: 0 10px; } } /* Section 3/4 E-fullfilment Partners / Enterprises */ .no-margin { margin: 0; } .dev-portal__section-three-four__content { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ } .dev-portal__section-three-four__content div > h2 { margin-bottom: 30px; } .dev-portal__section-three-four__point { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ align-items: flex-start; margin-bottom: 16px; } .dev-portal__section-three-four__point > div { min-width: 60px; height: none; margin-right: 40px; } .dev-portal__section-three-four__content div > div > p { margin-bottom: 16px; } .dev-portal__section-three-four__img { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ align-items: center; } .dev-portal__section-three-four__img > img { display: block; margin: auto auto; width: 492px; } @media (max-width: 768px) { .dev-portal__section-three-four > .container { padding: 0 50px; } .dev-portal__section-three-four__content { flex-direction: column-reverse; } .dev-portal__section-three-four__img > img { display: none; } .dev-portal__section-three-four__img { margin-bottom: 20px; } } .divider-container { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ justify-content: center; width: 100%; height: 1px; } .divider-container > div { width: 400px; border-top: 1px solid #D9D9D9; height: 1px; } /* Note: hard-coded by Paul to fix the hover state of dropdowns, May 2021 */ #hub-subheader-parent #hub-subheader .hub-subheader-breadcrumbs .dropdown-menu a:hover { color: #ccc; } .QuickNav-modal.QuickNav-modal-desktop > section { max-width: 1400px; } .QuickNav-modal.QuickNav-modal-desktop > section nav { align-items: flex-start; }