:root { --loading-size: min(400px, min(100vh, 100vw)); --background: #fff; --secondary-background: #F7F7FA; --grey-text-color: #6E6E6E; --bold-text-color: #111111; --payment-info-separator-color: rgba(17, 17, 17, 0.1); --link-color: #007AFE; --step-circle-bg-color: #F7F7FA; --step-circle-border-color: rgba(17, 17, 17, 0.15); --step-circle-active-bg-color: #151445; --step-circle-active-color: #FFFFFF; --step-arrow-color: #1A163D; --input-text-color: rgba(51, 51, 51, 1); --input-placeholder-color: rgba(23, 23, 29, 0.35); --input-border-color: rgba(17, 17, 17, 0.25); --input-focus-border-color: rgba(25, 133, 255, 0.7); --input-bg-color: #FFFFFF; --button-background-color: #205EFF; --button-disabled-background-color: #4885CE; --button-hover-background-color: #205EFFCC; --form-control-color: rgba(23, 23, 29, 0.9); --separator-color: rgba(17, 17, 17, 0.1); --error-color: #FA4655; --tooltip-bg-color: #F7F7FA; --header-border-color: rgba(17, 17, 17, 0.25); --radio-button-border-color: rgba(17, 17, 17, 0.25); --radio-button-fill-color: #007AFE; } @media (prefers-color-scheme: dark) { :root { --background: #2A2A2A; --secondary-background: rgba(255, 255, 255, 0.05); --bold-text-color: #FFFFFF; --grey-text-color: rgba(255, 255, 255, 0.6); --step-circle-bg-color: rgba(255, 255, 255, 0.05); --step-circle-border-color: rgba(255, 255, 255, 0.15); --step-circle-active-bg-color: #FFFFFF; --step-circle-active-color: #111111; --step-arrow-color: #FFF; --link-color: #59A5FF; --input-text-color: rgba(255, 255, 255, 1); --input-placeholder-color: rgba(255, 255, 255, 0.3); --input-border-color: rgba(255, 255, 255, 0.1); --input-focus-border-color: rgba(89, 165, 255, 1); --input-bg-color: rgba(255, 255, 255, 0.05); --form-control-color: rgba(255, 255, 255, 0.95); --separator-color: rgba(255, 255, 255, 0.1); --payment-info-separator-color: rgba(255, 255, 255, 0.1); --tooltip-bg-color: #1C1C1C; --header-border-color: rgba(255, 255, 255, 0.4); --radio-button-border-color: rgba(255, 255, 255, 0.4); --radio-button-fill-color: #59A5FF; } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 16px; font-weight: normal; font-style: normal; letter-spacing: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--background); } #page-loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--background); z-index: 104; } #page-loader img { display: block; position: absolute; top: calc(50% - var(--loading-size) / 2); left: calc(50% - var(--loading-size) / 2); width: var(--loading-size); height: var(--loading-size); } #app-loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; padding-top: calc(50vh - 120px); flex-direction: column; align-items: center; justify-items: center; text-align: center; background: var(--background); z-index: 1000; } #app-loader .logo { display: inline-block; width: 116px; height: 116px; margin-bottom: 48px; } #app-loader .spinner { display: inline-block; width: 32px; height: 32px; -webkit-animation: spin .75s linear infinite; -moz-animation: spin .75s linear infinite; animation: spin .75s linear infinite; } #app-loader p { display: block; padding-top: 14px; color: var(--form-control-color); font-size: .875rem; font-weight: 500; line-height: 18px; text-align: center; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } header { border-bottom: 1px solid var(--header-border-color); font-size: .875rem; } .content { margin: 0 auto; width: 796px; } .flex-container { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: center; } header .content { justify-content: space-between; padding: 20px 0; } .header-logo { display: flex; flex-direction: row; align-items: center; } .header-logo img { height: 24px; margin-right: 8px; } .header-logo .header-title { font-weight: bold; color: var(--bold-text-color); } .header-logo .header-title span { margin-right: 4px; } .header-additional-info { color: var(--grey-text-color); display: flex; gap: 18px; justify-content: flex-end; letter-spacing: -0.42px; } .header-additional-info > * { display: flex; align-items: center; } .header-additional-info svg { margin-right: 4px; } .steps-container { display: flex; align-items: center; position: relative; padding: 40px 0 33px; } .back { position: absolute; left: 0; text-decoration: none; color: var(--bold-text-color); background-color: var(--secondary-background); padding: 6px 12px; border-radius: 16px; display: flex; flex-direction: row; align-items: baseline; font-size: 14px; } .back:hover { text-decoration: none; color: var(--bold-text-color); opacity: 0.7; } .back svg { margin-right: 6px; } .back span { text-transform: capitalize; } .steps-wrapper { flex: 1; display: flex; justify-content: center; } .steps { display: flex; align-items: center; } .steps > * { float: left; display: flex; } .steps .circle { width: 22px; height: 22px; border-radius: 50%; background-color: var(--step-circle-bg-color); color: var(--grey-text-color); font-size: 0.75rem; font-weight: 590; display: flex; align-items: center; justify-content: center; border: 2px solid var(--step-circle-border-color); } .steps .step.active .circle { color: var(--step-circle-active-color); background-color: var(--step-circle-active-bg-color); border-color: var(--step-circle-active-bg-color); } .steps .step-title { color: var(--grey-text-color); padding-left: 8px; font-size: 14px; line-height: 22px; } .steps .step.active .step-title { color: var(--bold-text-color); font-weight: bold; } .steps .arrow { display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; margin: 0 12px; } .steps .arrow svg path { stroke: var(--step-arrow-color); } .payment-block { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; width: 100%; } .payment-block > * { width: 386px; min-height: 420px; } .payment-info { border-radius: 16px; background-color: var(--secondary-background); padding: 24px; display: flex; flex-direction: column; } .payment-info .product-summary { padding-bottom: 12px; display: flex; flex-direction: row; align-items: flex-start; border-bottom: 1px solid var(--payment-info-separator-color); } .payment-info .product-summary .product-logo { height: 56px; width: 56px; } .payment-info .product-description { display: flex; flex-direction: column; align-items: flex-start; padding-left: 12px; flex-grow: 1; } .payment-info .product-description > * { width: 100%; } .payment-info .product-description .product-name { font-size: 14px; font-weight: bold; color: var(--bold-text-color); } .payment-info .product-description .product-price-full.disabled { color: var(--grey-text-color); text-decoration: line-through; } .payment-info .product-description .product-type { font-size: 12px; color: var(--grey-text-color); } .payment-info .product-description .vat-description { font-size: 12px; color: var(--grey-text-color); } .payment-info .product-description .vat-description .is-loading { background-color: rgba(0, 0, 0, .075); border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, .025); color: transparent; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; overflow: hidden; position: relative; } .payment-info .product-description .vat-description .is-loading:after { content: ''; -webkit-animation: blurLoading 1.5s infinite; animation: blurLoading 1.5s infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: radial-gradient(circle at 80% -20%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle at 50% 150%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle at 20% -20%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%); display: block; height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); width: 800%; } @-webkit-keyframes blurLoading { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } to { -webkit-transform: translateX(10%); transform: translateX(10%) } } @keyframes blurLoading { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } to { -webkit-transform: translateX(10%); transform: translateX(10%) } } .payment-info .promo-block { padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--payment-info-separator-color); } .payment-info .promo-block .promo-discount > * { display: inline-block; vertical-align: middle; } .payment-info .promo-block .promo-discount .delete-btn { display: inline-block; cursor: pointer; } .payment-info .promo-block .promo-discount { font-size: 14px; line-height: 18px; } .payment-info .promo-block .promo-discount .promo-code-text { color: var(--grey-text-color); } .payment-info .promo-block .promo-discount .promo-discount-value { color: #3CC83C; } .payment-info .promo-block .show-promo-row, .payment .vat-block .show-vat-row { font-size: 14px; color: var(--link-color); font-weight: 500; cursor: pointer; } .payment-info .promo-block .show-promo-row > *, .payment .vat-block .show-vat-row > * { display: inline-block; vertical-align: middle; } .svg-plus path { fill: var(--link-color); } .svg-arrow-up path { stroke: var(--link-color); } .payment-info .promo-block .promo-input-wrapper, .payment .vat-block .vat-input-wrapper, .payment .email-input-wrapper { margin-top: 8px; display: flex; flex-direction: row; align-items: flex-start; height: 48px; width: 100%; } .payment .vat-block .vat-input-wrapper { flex-direction: column; align-items: normal; height: auto; } .payment-info .promo-block .promo-input-wrapper .promo-input, .payment .vat-block .vat-input-wrapper .vat-input, .payment .email-input-wrapper { height: 100%; margin-right: 8px; position: relative; flex-grow: 1; } .payment .vat-block .vat-input-wrapper .vat-input { margin-right: 0; margin-bottom: 8px; } input[type="text"], input[type="email"], select { height: 48px; border-radius: 4px; font-size: 16px; line-height: 22px; padding: 12px 24px; font-weight: 400; border: 1px solid var(--input-border-color); background-color: var(--input-bg-color); color: var(--input-text-color); width: 100%; } input[type="text"]:focus, input[type="email"]:focus, select:focus { border: 1px solid var(--input-focus-border-color); outline: 0; box-shadow: none; } input::placeholder, input[readonly] { color: var(--input-placeholder-color); } .payment-info button#add-promo, .payment button#add-vat { height: 100%; border-radius: 4px; padding: 12px 24px; background-color: var(--button-background-color); color: #FFFFFF; } .payment-info button#add-promo:disabled, .payment button#add-vat:disabled { background-color: var(--button-disabled-background-color); border-color: var(--button-disabled-background-color); color: rgba(255, 255, 255, 0.6); opacity: 1; } .payment-info button#add-promo:not(:disabled):hover, .payment button#add-vat:not(:disabled):hover { background-color: var(--button-hover-background-color); border-color: var(--button-hover-background-color); color: #FFFFFF; } .exclamation-mark { padding: 0 8px 2px 0; } input.is-incorrect, input.is-invalid { border-color: var(--error-color); } input.is-valid, input.is-loading { padding-right: 36px; } .validation-error { margin-top: 10px; display: flex; align-items: center; line-height: 20px; font-size: 13px; color: var(--error-color); } .success-mark, .loading-spinner { position: absolute; right: 16px; top: 10px; } .loading-spinner img { -webkit-animation: spin .75s linear infinite; -moz-animation: spin .75s linear infinite; animation: spin .75s linear infinite; } .vat-block { margin-bottom: 16px; } .total-block .total-row { margin-top: 16px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; } .total-block .total-row .title { font-size: 14px; line-height: 27px; font-weight: bold; color: var(--bold-text-color); } .total-block .total-row .total-amount { font-size: 20px; line-height: 27px; font-weight: bold; color: var(--bold-text-color); } .total-block .billing-period-row { font-size: 13px; line-height: 18px; color: var(--grey-text-color); } .total-block .billing-period-row .billing-period { float: right; } .footer-block { font-size: 13px; color: var(--grey-text-color); margin-top: auto; margin-bottom: 0; } .footer-block .agreement { margin-bottom: 8px; } .footer-block .secure-svg, .footer-block .secure-text { display: inline-block; vertical-align: middle; } .payment .alert { border: 1px solid var(--error-color); border-radius: 4px; color: var(--error-color); padding: 10px 24px; display: flex; align-items: flex-start; font-size: 13px; font-weight: 300; margin-bottom: 16px; } .payment .alert span.highlight, .payment .alert a { color: var(--link-color); } .form-group { margin-bottom: 12px; } .form-group .label-container { width: 100%; font-size: 14px; line-height: 19px; font-weight: bold; margin-bottom: 8px; } .form-group label { margin: 0; padding: 0; } .payment input[type="text"], .payment input[type="email"] { width: 100%; } .label-container.card-and-sepa { display: none; font-size: 14px; font-weight: bold; line-height: 133%; } .label-container.card-and-sepa input[type="radio"] { margin-right: 4px; } .label-container.card-and-sepa .row-radio .label-content { height: 24px; display: flex; align-items: center; justify-content: space-between; width: 100%; } .label-container.card-and-sepa .row-radio { margin-bottom: 4px; } .label-container.card-and-sepa .row-radio label { width: calc(100% - 2px); cursor: pointer; } .radio-label input { display: none; } .radio-label { cursor: pointer; } .radio-label .label-content svg circle:first-child { stroke: var(--radio-button-border-color); } .radio-label .label-content svg circle:nth-child(2) { fill: var(--radio-button-fill-color); } .radio-label input:not(:checked) + .label-content svg circle:nth-child(2) { display: none; } .payment .row.sepa-iban .success-mark { display: none; position: absolute; top: 10px; right: 35px; } .payment #sepa-iban.is-valid + .success-mark { display: block; } .card-custom-control { height: 48px; padding: 12px 24px; border: 1px solid var(--input-border-color); border-radius: 4px; background-color: var(--input-bg-color); } .StripeElement--webkit-autofill { background-color: var(--input-bg-color) !important; } .card-custom-control.number { border-radius: 4px 4px 0 0; } .card-custom-control.expiry, .card-custom-control.cvc { border-top: none; } .card-custom-control.expiry { border-radius: 0 0 0 4px; border-right: none; } .card-custom-control.cvc { border-radius: 0 0 4px 0; } .card-custom-control.iban.focus { border: 1px solid var(--input-focus-border-color); outline: 0; box-shadow: none; } label.is-invalid { margin-top: 15px; } label.is-invalid, label.error-field { color: var(--error-color); font-size: 13px; line-height: 1.5; } .card-custom-control.iban.is-invalid { border: 1px solid var(--error-color); outline: 0; box-shadow: none; } label.is-invalid:before, label.error-field:before { content: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/ppc/error-mark.svg?1770636111"); margin-right: 4px; } .submit-btn-wrapper { width: 100%; } .submit-btn-wrapper button { width: 100%; height: 48px; background-color: var(--button-background-color); border-radius: 6px; font-size: 18px; font-weight: 500; color: #FFFFFF; } .submit-btn-wrapper button:hover { background-color: var(--button-hover-background-color); color: #FFFFFF; } .separator { display: flex; align-items: center; text-align: center; color: var(--grey-text-color); padding: 0 1px 0; font-size: 14px; line-height: 150%; margin: 12px 0; } .separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--separator-color); } .separator:not(:empty)::before { margin-right: .5rem; } .separator:not(:empty)::after { margin-left: .5rem; } .company-details { margin-top: 16px; } .three-d-secure { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .7); z-index: 105; } .three-d-secure > iframe { display: block; width: 100%; min-width: 250px; height: 100%; min-height: 400px; border: 0; } #payment-request-button { padding-bottom: 8px; } label { color: var(--bold-text-color); } #email-warning { margin-top: 15px; font-size: 13px; line-height: 1.5; color: var(--error-color); } .cvc-tooltip { position: absolute; right: 24px; top: 10px; cursor: pointer; } .cvc-tooltip .tooltip-text { position: absolute; bottom: 34px; left: -111px; width: 246px; height: auto; color: var(--grey-text-color); padding: 16px; font-size: 12px; z-index: 102; border-radius: 10px; cursor: default; visibility: hidden; } .cvc-tooltip:hover .tooltip-text { visibility: visible; background-color: var(--tooltip-bg-color); } .cvc-tooltip .tooltip-text::after { content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%) rotate(180deg); border-width: 10px; border-style: solid; border-color: transparent transparent var(--tooltip-bg-color) transparent; } .stripe-errors:has(.error-field:not(.d-none)) { margin-top: 15px; } .payment .paypal-button { background-color: #ffc439; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/checkout/paypal.svg?1770636111"); background-repeat: no-repeat; background-position: center; background-size: auto 28px; border: 0; border-radius: 5px; cursor: pointer; font-family: -apple-system, system-ui, BlinkMacSystemFont, SF Pro Text, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; height: 44px; padding: 0; position: relative; transition: background-color .15s ease; width: 100%; } .payment .paypal-button:hover { background-color: #f3ba38; } .payment .paypal-button:active { background-color: #e5b034; }