Changeset View
Changeset View
Standalone View
Standalone View
landing/subscription-form.css
| form { | form { | ||||
| display: flex; | display: flex; | ||||
| } | } | ||||
| .button { | .button { | ||||
| position: relative; | |||||
| width: auto; | |||||
| border: 1px solid white; | |||||
| border-left: none; | |||||
| border-radius: 0 8px 8px 0; | |||||
| padding-left: 20px; | |||||
| padding-right: 20px; | |||||
| cursor: pointer; | cursor: pointer; | ||||
| font-family: var(--sans-serif); | border: none; | ||||
| font-size: 16px; | padding: 16px 32px; | ||||
| color: white; | border-radius: 4px; | ||||
| color: var(--white-100); | |||||
| background: #7e57c2; | background: var(--violet-dark-60); | ||||
| box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5); | min-width: 184px; | ||||
| transition: 0.2s; | |||||
| margin-inline: 0; | |||||
| } | } | ||||
| .button_success { | .button_success { | ||||
| border: 1px solid #28a747; | background-color: var(--success-dark-90); | ||||
| background: #28a747; | |||||
| box-shadow: -12px 20px 50px #28a747; | |||||
| } | } | ||||
| .button_failure { | .button_failure { | ||||
| border: 1px solid #dc3545; | background-color: var(--error-dark-50); | ||||
| background: #dc3545; | |||||
| box-shadow: -12px 20px 50px #dc3545; | |||||
| } | } | ||||
| .button:hover { | .button:hover { | ||||
| background: #8c69c9; | background-color: var(--violet-dark-80); | ||||
| box-shadow: -12px 20px 50px rgba(139, 107, 194, 0.5); | |||||
| } | } | ||||
| .button_success:hover { | .button_success:hover { | ||||
| background: #34b855; | background-color: var(--success-dark-90); | ||||
| box-shadow: -12px 20px 50px #28a747; | |||||
| } | } | ||||
| .button_failure:hover { | .button_failure:hover { | ||||
| background: #df3f4f; | background: var(--error-dark-50); | ||||
| box-shadow: -12px 20px 50px #dc3545; | |||||
| } | } | ||||
| input.email_input { | input.email_input { | ||||
| flex: 1; | flex: 1; | ||||
| padding: 20px; | padding: 16px 24px; | ||||
| background-color: transparent; | |||||
| background: rgba(11, 18, 27, 0.25); | color: var(--white-100); | ||||
| border: 1px solid var(--white-80); | |||||
| font-family: 'IBM Plex Mono', monospace; | border-radius: 4px; | ||||
| font-size: 16px; | |||||
| color: white; | |||||
| border: 1px solid white; | |||||
| border-right: none; | |||||
| border-radius: 8px 0 0 8px; | |||||
| outline: none; | outline: none; | ||||
| margin-inline: 0; | |||||
| transition: 300ms; | transition: 300ms; | ||||
| margin-right: 12px; | |||||
| } | } | ||||
| input.email_input:focus { | input.email_input:focus { | ||||
| box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5); | border: 1.5px solid var(--white-100); | ||||
| transition: 300ms; | transition: 300ms; | ||||
| } | } | ||||
| input.email_input_success { | |||||
| border: 1px solid #28a747; | |||||
| box-shadow: -12px 20px 50px #28a747; | |||||
| } | |||||
| input.email_input_failure { | input.email_input_failure { | ||||
| border: 1px solid #dc3545; | border: 1px solid var(--error-dark-50); | ||||
| box-shadow: -12px 20px 50px #dc3545; | |||||
| } | } | ||||
| @media (max-width: 1099px) { | @media (max-width: 1099px) { | ||||
| form { | form { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| .button { | .button { | ||||
| width: 100%; | width: 100%; | ||||
| height: 50px; | height: 50px; | ||||
| border: none; | |||||
| border-radius: 8px; | |||||
| } | } | ||||
| input.email_input { | input.email_input { | ||||
| width: 100%; | width: 100%; | ||||
| height: 50px; | height: 50px; | ||||
| border-radius: 8px; | margin-bottom: 16px; | ||||
| margin-bottom: 0.5em; | |||||
| box-sizing: border-box; | |||||
| border: 1px solid white; | |||||
| } | } | ||||
| } | } | ||||