//Support bar
.l-checkout__support {
- margin-bottom: 22px;
+ margin-bottom: 22px;
+
+ margin-left: 16px;
+ margin-right: 16px;
}
.l-checkout__support__bar {
border-radius: 10px;
width: 100%; height: 34px;
position: relative;
+ flex: 1;
span {
position: absolute;
top: 0; left: 0;
background: #92BD39;
border-radius: 10px;
&:after {
+ white-space: nowrap;
+ color: #083F4D;
+ top: 0; left:10px; bottom: 2px;
+ @include rwd($B5) {
+ color: #FFFFFF;
+ right: 13px;
+ left: auto;
+ }
margin: auto;
position: absolute;
- top: 0; right: 13px; bottom: 2px;
content: attr(data-label);
font-weight: bold;
font-size: 15px;
- color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
display: flex;
margin-top: 7px;
justify-content: space-between;
- align-items: center;
+ align-items: flex-start;
+ gap: 15px;
p {
margin: 0;
font-weight: normal;
border-radius: 10px;
padding-bottom: 30px;
overflow: hidden;
+ margin: 0 16px;
}
.l-checkout__box__header {
display: flex;
background: #083F4D;
+
+ img {
+ display: none;
+ @include rwd($break-flow) {
+ display: block;
+ }
+ }
}
.l-checkout__box__header__content h1 {
//Steps
.l-checkout__steps {
display: flex;
- padding: 0 125px;
- justify-content: space-between;
margin-top: -24px;
+ justify-content: space-around;
+
+ @include rwd($break-flow) {
+ padding: 0 125px;
+ justify-content: space-between;
+ }
div {
width: 145px;
text-align: center;
letter-spacing: -0.01em;
color: #083F4D;
+ display: none;
+ @include rwd($break-flow) {
+ display: block;
+ }
}
&.is-completed {
align-items: center;
justify-content: center;
margin-top: 35px;
+ width: 100%;
}
.l-switch {
}
.l-switch label {
- color: #fff;
+ color: #74BDC2;
font-weight: 600;
- font-size: 21.5px;
+ font-size: 18.5px;
line-height: 26px;
transition: color .2s ease;
width: 122px;
cursor: pointer;
+
+ @include rwd($break-flow) {
+ font-size: 21.5px;
+ }
}
.l-switch label:nth-of-type(1) {
z-index: 2;
}
+.toggle-input-left:checked ~ .l-switch__wrapper {
+ .toggle-for-left {
+ color: #003C3C;
+ }
+ .toggle {
+ left: 5px;
+ }
+}
+.toggle-input-right:checked ~ .l-switch__wrapper {
+ .toggle-for-right {
+ color: #003C3C;
+ }
+ .toggle {
+ left: 39px;
+ }
+}
.l-switch input:checked~label:nth-of-type(1) { color: #003C3C; }
-.l-switch input:checked~label:nth-of-type(2) { color: #74BDC2; }
-
-.l-switch input~:checked~label:nth-of-type(1) { color: #74BDC2; }
.l-switch input~:checked~label:nth-of-type(2) { color: #003C3C; }
.l-switch input:checked~.toggle {
//Payments
.l-checkout__payments {
display: none;
- padding: 0 30px;
+ padding: 0 16px;
margin-top: 34px;
margin-bottom: 0;
flex-wrap: wrap;
justify-content: flex-start;
- flex-direction: column;
+ flex-direction: row;
+ column-gap: 16px;
@include rwd($break-flow) {
- flex-direction: row;
+ //flex-direction: row;
+ padding: 0 30px;
+ column-gap: 30px;
}
}
.l-checkout__payments__box {
display: flex;
flex-direction: column;
- width: calc(33.333% - 20px);
background: #FFFFFF;
border-radius: 10px;
overflow: hidden;
transition: box-shadow $ease-out 250ms;
box-shadow: 0px 0px 0px rgba(55, 170, 156, 0);
margin-bottom: 30px;
- margin-right: 30px;
-
- &:nth-child(3) {
- margin-right: 0;
- }
+ width: 100%;
- &:nth-child(5) {
- margin-right: 0;
- width: calc(67.4% - 20px);
+ @include rwd($break-flow) {
+ width: calc(33.333% - 20px);
}
-
h3 {
margin: 0;
font-weight: bold;
}
}
.l-checkout__payments__box__btn-wrp {
- padding: 20px;
+ padding: 0 20px 20px 20px;
margin-bottom: 0;
margin-top: auto;
+ @include rwd($break-flow) {
+ padding-top: 20px;
+ }
}
p {
margin-top: 0;
outline: 0;
cursor: pointer;
font-weight: 600;
- font-size: 20px;
- line-height: 25px;
+ font-size: 16px;
+ line-height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #083F4D;
transition: background $ease-out 250ms;
+ @include rwd($break-flow) {
+ font-size: 20px;
+ line-height: 25px;
+ }
+
&:hover {
background: rgba(#92BD39, 0.75);
}
}
+ img {
+ display: none;
+ @include rwd($break-flow) {
+ display: block;
+ }
+ }
&.is-active {
- box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35);
+ box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35);
+ background: white;
+ color: black;
h3 {
color: white;
}
}
- &.l-checkout__payments__box--xl {
- flex-direction: row;
- & > div {
- display: flex;
- &:first-child {
- width: 50%;
- flex-wrap: wrap;
- max-width: 340px;
- margin-right: 20px;
+ &.l-checkout__payments__box--half {
+ width: calc(50% - 8px);
+ @include rwd($break-flow) {
+ width: calc(33.333% - 20px);
}
- &:last-child {
- width: 49%;
- align-items: center;
- justify-content: center;
+ &.is-active {
+ background: #083F4D;
+ color: white;
+
+ @include rwd($break-flow) {
+ background: white;
+ color: black;
+ }
+ }
+ }
+ &.l-checkout__payments__box--bar {
+ flex-direction: row;
+
+ @include rwd($break-flow) {
+ flex-direction: column;
+ }
+
+ &.is-active {
+ background: #083F4D;
+ color: white;
+
+ @include rwd($break-flow) {
+ background: white;
+ color: black;
+ }
+ }
+
+ h3, .l-checkout__payments__box__btn-wrp {
+ flex-grow: 1;
+ }
+ }
+ &.l-checkout__payments__box--card {
+ }
+
+ &.l-checkout__payments__box--xl {
+ width: 100%;
+ justify-content: center;
+ min-height: 160px;
+
+ @include rwd($break-flow) {
+ width: calc(67.4% - 20px);
+ padding-left: calc(33.7% - 10px);
+ position: relative;
+
+ h3 {
+ position: absolute;
+ left: 0;
+ top: 0;
+ padding-right: 50%;
+ }
+
+ .l-checkout__payments__box__btn-wrp {
+ margin: 0;
+
+ p {
+ flex-wrap: wrap;
+ max-width: 340px;
+ margin-right: 20px;
+ }
+
+ button {
+ position: absolute;
+ bottom: 20px;
+ left: 20px;
+ width: calc(50% - 50px);
+ align-items: center;
+ justify-content: center;
+ }
+ }
}
- }
h3 {
width: 100%;
width: 100%;
}
+ &.once {
+ h3 {
+ text-indent: 0;
+ padding-left: 0;
+ }
+ }
+ }
+ &.l-checkout__payments__box--special {
button {
border-color: #FFA500;
background-color: #FFA500;
background: darken(#FFA500, 5%);
}
}
-
- &.once {
- h3 {
- text-indent: 0;
- padding-left: 0;
- }
- }
}
}
//Amount
.l-checkout__amount {
display: flex;
- align-items: flex-end;
- justify-content: flex-end;
- padding-right: 30px;
+ flex-direction: column;
+ padding: 0 16px;
+ row-gap: 16px;
+ @include rwd($break-flow) {
+ flex-direction: row;
+ align-items: flex-end;
+ justify-content: flex-end;
+ padding-right: 30px;
+ }
+
button {
border: none;
height: 56px;
align-items: center;
justify-content: center;
text-align: center;
- margin-left: 32px;
color: #FFFFFF;
- width: 340px;
+
+ @include rwd($break-flow) {
+ margin-left: 32px;
+ width: 340px;
+ }
+
}
.l-checkout__input {
- width: 340px;
+ @include rwd($break-flow) {
+ width: 340px;
+ }
}
}
+
+
//Input
.l-checkout__input {
display: flex;
span { color: #FF4C54; }
}
input, select, textarea {
+ width: 100%;
height: 56px;
background: #FFFFFF;
border: 1px solid #D5ECED;
}
button {
- height: 56px;
+ height: 40px;
background: #083F4D;
+ border: none;
border-radius: 3px;
font-weight: 600;
- font-size: 20px;
+ font-size: 16px;
line-height: 25px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
- margin-left: 32px;
color: #FFFFFF;
- width: 340px;
+
+ @include rwd($break-flow) {
+ height: 56px;
+ font-size: 20px;
+ width: 340px;
+ margin-left: 32px;
+ }
}
}
//Cols
.l-checkout__cols {
display: flex;
- padding: 0 30px;
+ flex-direction: column;
margin-top: 50px;
+ padding: 0 16px;
+ @include rwd($break-flow) {
+ padding: 0 30px;
+ flex-direction: row;
+ }
+
&.bt-w {
margin-top: 30px;
padding-top: 20px;
}
.l-checkout__col {
+ @include rwd($break-flow) {
&:nth-child(1) {
width: 402px;
padding-right: 62px;
}
}
&:nth-child(2) {
- width: calc(100% - 340px);
+ width: calc(100% - 402px);
}
&.full {
width: 100%;
}
}
}
+ }
}
-.l-checkout__footer__img {
- display: flex;
- margin-right: 30px;
- margin-left: auto;
- margin-top: 30px;
+.l-checkout__secure {
+ margin-top: 30px;
+ margin-right: 30px;
+ text-align: right;
+ font-size: 15px;
+ color: #888;
+
+ .l-checkout__secure__padlock {
+ margin-right: 5px;
+ vertical-align: baseline;
+ }
+
+ .l-checkout__secure__img {
+ margin-left: 10px;
+ vertical-align: bottom;
+ }
}
+
//Form
.l-checkout__form {
display: flex;
}
.l-checkout__form__row {
- display: flex;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
margin-bottom: 24px;
+ @include rwd($break-flow) {
+ flex-direction: row;
+ }
+
&:nth-child(4) {
.l-checkout__input {
&:nth-child(1) { width: 172px; }
&.full {
flex-direction: column;
-
- .l-checkout__input {
- &:nth-child(1) {
- padding-right: 0;
- }
- &:nth-child(2) {
- padding-left: 0;
- }
+ @include rwd($break-flow) {
+ flex-direction: column;
}
}
.l-checkout__input {
width: 100%;
- &:nth-child(1) {
- padding-right: 10px;
- }
- &:nth-child(2) {
- padding-left: 10px;
- }
}
& > a {
}
&.confirm {
- display: flex;
+ display: flex;
+ flex-direction: row;
align-items: center;
- justify-content: space-between;
+ justify-content: stretch;
width: 100%;
+ gap: 50px;
+ @include rwd($break-flow) {
+ justify-content: space-between;
+ }
+
.l-checkout__input {
- width: auto;
+ flex-grow: 1;
+ @include rwd($break-flow) {
+ width: auto;
+ flex-grow: 0;
+ }
}
}
.errorlist {
flex-wrap: wrap;
margin-top: 12px;
margin-bottom: 52px;
+ margin-left: 16px;
+ margin-right: 16px;
}
.l-checkout__footer > img {
.l-checkout__footer__content__item {
display: flex;
+ flex-direction: column;
+ @include rwd($break-flow) {
+ flex-direction: row;
+ }
+
&:not(:last-child) {
padding-bottom: 30px;
margin-bottom: 30px;
}
.l-checkout__footer__content h3 {
+ @include rwd($break-flow) {
font-weight: 600;
font-size: 21.5px;
line-height: 140%;
letter-spacing: -0.01em;
color: #083F4D;
width: 318px;
+ }
}
.l-checkout__footer__content__item > div {
+ @include rwd($break-flow) {
width: 100%;
padding-left: 120px;
+ }
}
.l-checkout__footer__content__item > div p {
}
~.payments-once {
display: flex;
+
+ &.wide-spot-1 ~.l-checkout__amount {
+ @include rwd($break-flow) {
+ margin-top: -110px;
+
+ > div, > button {
+ width: calc(33.333% - 20px);
+ }
+ }
+ }
+ &.wide-spot-2 ~.l-checkout__amount {
+ @include rwd($break-flow) {
+ flex-direction: column;
+ margin-top: -182px;
+
+ > div, > button {
+ width: calc(33.333% - 20px);
+ }
+ }
+ }
}
}
&#switch-monthly:checked {
}
~.payments-recurring {
display: flex;
+
+ &.wide-spot-1 ~.l-checkout__amount {
+ @include rwd($break-flow) {
+ margin-top: -110px;
+
+ > div, > button {
+ width: calc(33.333% - 20px);
+ margin-left: 24px;
+ }
+ }
+ }
+ &.wide-spot-2 ~.l-checkout__amount {
+ @include rwd($break-flow) {
+ flex-direction: column;
+ margin-top: -182px;
+
+ > div, > button {
+ width: calc(33.333% - 20px);
+ }
+ }
+ }
}
}
}