.success-message { display: flex; justify-content: center; flex-direction: column; height: 400px; } .success-text { color: rgb(0, 0, 0); font-size: 28px; font-weight: 500; opacity: 0.7; margin-bottom: 20px; } /* Container needed to position the button. Adjust the width as needed */ .container { display: inline-block; position: relative; width: 420px; } /* Make the image responsive */ /* Style the button and place it in the middle of the container/image */ .container .btn { padding: 10px 20px; border: none; cursor: pointer; height: 40px; background: rgb(0, 102, 240); box-shadow: 0px 15px 35px 0px rgba(50, 50, 93, 0.1), 0px 5px 15px 0px rgba(0, 0, 0, 0.07); border-radius: 22px 22px 22px 22px; margin-top: 5px; color: rgb(255, 255, 255); font-size: 17px; font-weight: 500; } .container .btn:hover { background-color: black; } .price-and-button-container { display: flex; justify-content: space-around; } .product-name { text-align: left; color: rgb(0, 0, 0); font-size: 17px; font-weight: 500; opacity: 0.7; } .product-price { text-align: left; color: rgb(0, 0, 0); font-size: 28px; font-weight: 500; } .endstate { display: none; } /* =================== */ /* Variables */ :root { --gray-offset: rgba(0, 0, 0, 0.03); --gray-border: rgba(0, 0, 0, 0.15); --gray-light: rgba(0, 0, 0, 0.4); --gray-mid: rgba(0, 0, 0, 0.7); --gray-dark: rgba(0, 0, 0, 0.9); --body-color: var(--gray-mid); --headline-color: var(--gray-dark); --accent-color: #0066f0; --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif; --radius: 6px; --form-width: 343px; } /* Base */ * { box-sizing: border-box; } body { font-family: var(--body-font-family); font-size: 16px; color: var(--body-color); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--body-color); margin-top: 2px; margin-bottom: 4px; } h1 { font-size: 27px; color: var(--headline-color); } h4 { font-weight: 500; font-size: 14px; color: var(--gray-light); } /* Layout */ .sr-root { display: flex; flex-direction: row; width: 100%; max-width: 980px; padding: 48px; align-content: center; justify-content: center; height: auto; min-height: 100vh; margin: 0 auto; } .sr-header { margin-bottom: 32px; } .sr-payment-summary { margin-top: 20px; margin-bottom: 20px; } .sr-main, .sr-content { display: flex; flex-direction: column; justify-content: center; height: 100%; align-self: center; } .sr-main { width: var(--form-width); } .sr-content { padding-left: 48px; } .sr-header__logo { background-image: url('/theme/cloud/images/logo.png'); background-size: contain; background-repeat: no-repeat; width: 100%; } .sr-legal-text { color: var(--gray-light); text-align: center; font-size: 13px; line-height: 17px; margin-top: 12px; } .sr-field-error { color: var(--accent-color); text-align: left; font-size: 13px; line-height: 17px; margin-top: 12px; } /* Form */ .sr-form-row { margin: 16px 0; } label { color: var(--label-color); font-size: 13px; font-weight: 500; margin-bottom: 8px; display: inline-block; } /* Inputs */ .sr-input, .sr-select, input[type='text'] { border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 2px 12px; height: 40px; width: 100%; transition: box-shadow 0.2s ease; background: white; -moz-appearance: none; -webkit-appearance: none; appearance: none; } .sr-input:focus, input[type='text']:focus, button:focus, .focused { box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3); outline: none; z-index: 9; } .sr-input::placeholder, input[type='text']::placeholder { color: var(--gray-light); } /* Checkbox */ .sr-checkbox-label { position: relative; cursor: pointer; } .sr-checkbox-label input { opacity: 0; margin-right: 6px; } .sr-checkbox-label .sr-checkbox-check { position: absolute; left: 0; height: 16px; width: 16px; background-color: white; border: 1px solid var(--gray-border); border-radius: 4px; transition: all 0.2s ease; } .sr-checkbox-label input:focus ~ .sr-checkbox-check { box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3); outline: none; } .sr-checkbox-label input:checked ~ .sr-checkbox-check { background-color: var(--accent-color); background-image: url('https://storage.googleapis.com/stripe-sample-images/icon-checkmark.svg'); background-repeat: no-repeat; background-size: 16px; background-position: -1px -1px; } /* Select */ .sr-select { display: block; height: 44px; margin: 0; background-image: url('https://storage.googleapis.com/stripe-sample-images/icon-chevron-down.svg'); background-repeat: no-repeat, repeat; background-position: right 12px top 50%, 0 0; background-size: 0.65em auto, 100%; } .sr-select:after { } .sr-select::-ms-expand { display: none; } .sr-select:hover { cursor: pointer; } .sr-select:focus { box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3); outline: none; } .sr-select option { font-weight: 400; } .sr-select:invalid { color: var(--gray-light); background-opacity: 0.4; } /* Combo inputs */ .sr-combo-inputs { display: flex; flex-direction: column; } .sr-combo-inputs input, .sr-combo-inputs .sr-select { border-radius: 0; border-bottom: 0; } .sr-combo-inputs > input:first-child, .sr-combo-inputs > .sr-select:first-child { border-radius: var(--radius) var(--radius) 0 0; } .sr-combo-inputs > input:last-child, .sr-combo-inputs > .sr-select:last-child { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 1px solid var(--gray-border); } .sr-combo-inputs > .sr-combo-inputs-row:first-child input:first-child { border-radius: var(--radius) 0 0 0; } .sr-combo-inputs > .sr-combo-inputs-row:first-child input:last-child { border-radius: 0 var(--radius) 0 0; } .sr-combo-inputs-row { width: 100%; display: flex; } .sr-combo-inputs-row > input { width: 100%; border-radius: 0; } .sr-combo-inputs > .sr-combo-inputs-row:first-child input:last-child { border-radius: var(--radius) var(--radius) 0 0; } .sr-combo-inputs-row:not(:first-of-type) .sr-input { border-radius: 0 0 var(--radius) var(--radius); } .sr-combo-inputs-row h3 { border-bottom: solid 1px var(--gray-mid); margin-top: 1rem; margin-bottom: 1rem; } /* Buttons and links */ button { background: var(--accent-color); border-radius: var(--radius); color: white; border: 0; padding: 12px 16px; margin-top: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: block; } button:hover { filter: contrast(115%); } button:active { transform: translateY(0px) scale(0.98); filter: brightness(0.9); } button:disabled { opacity: 0.5; cursor: none; } .sr-payment-form button, .fullwidth { width: 100%; } a { color: var(--accent-color); text-decoration: none; transition: all 0.2s ease; } a:hover { filter: brightness(0.8); } a:active { filter: brightness(0.5); } /* Code block */ .sr-callout { background: var(--gray-offset); padding: 12px; border-radius: var(--radius); max-height: 400px; max-width: 600px; overflow: auto; } code, pre { font-family: 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace; font-size: 14px; overflow-x: auto; white-space: pre-wrap; } /* Stripe Element placeholder */ .sr-card-element { padding-top: 12px; } /* Responsiveness */ @media (max-width: 720px) { .sr-root { flex-direction: column; justify-content: flex-start; padding: 48px 20px; min-width: 320px; } .sr-header__logo { background-position: center; } .sr-payment-summary { text-align: center; } .sr-content { display: none; } .sr-main { width: 100%; } } /* styles – Brand-overrides, can split these out */ :root { --label-color: #64a862; --accent-color: #ed5f74; --headline-color: var(--accent-color); } /* todo: spinner/processing state, errors, animations */ /* Animated form */ .sr-root { animation: 0.4s form-in; animation-fill-mode: both; animation-timing-function: ease; } .sr-payment-form .sr-form-row { animation: 0.4s field-in; animation-fill-mode: both; animation-timing-function: ease; transform-origin: 50% 0%; } /* need saas for loop :D */ .sr-payment-form .sr-form-row:nth-child(1) { animation-delay: 0; } .sr-payment-form .sr-form-row:nth-child(2) { animation-delay: 60ms; } .sr-payment-form .sr-form-row:nth-child(3) { animation-delay: 120ms; } .sr-payment-form .sr-form-row:nth-child(4) { animation-delay: 180ms; } .sr-payment-form .sr-form-row:nth-child(5) { animation-delay: 240ms; } .sr-payment-form .sr-form-row:nth-child(6) { animation-delay: 300ms; } .hidden { display: none; } .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; } @keyframes spin { to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } } .sr-plans { display: flex; width: 600px; } .sr-plan { border: 1px solid rgb(232, 232, 232); border-radius: 6px; margin-right: 25px; height: 226px; width: 257px; } .sr-plan-inner { margin: 28px; } .sr-plan-name { color: rgb(166, 166, 166); font-size: 20px; font-weight: 500; letter-spacing: 0px; } .sr-plan-text { color: rgb(153, 153, 153); font-size: 12px; font-weight: 500; letter-spacing: 0px; line-height: 14px; } .sr-plan-button { border: 2px solid rgb(237, 95, 116); border-radius: 7px; } @keyframes field-in { 0% { opacity: 0; transform: translateY(8px) scale(0.95); } 100% { opacity: 1; transform: translateY(0px) scale(1); } } @keyframes form-in { 0% { opacity: 0; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } }