You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
756 lines
14 KiB
756 lines
14 KiB
:host {
|
|
display: block;
|
|
}
|
|
|
|
.plans.plans_embedded {
|
|
margin-top: 0;
|
|
|
|
.plans__points-row {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.plan-grid-container {
|
|
overflow: auto;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
.plans {
|
|
margin-top: 19px;
|
|
|
|
.plans__points-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin-bottom: 60px;
|
|
box-sizing: border-box;
|
|
|
|
.billing_cycle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
height: 53px;
|
|
padding: 6px;
|
|
border-radius: 26px;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.billing_cycle__tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 145px;
|
|
height: 41px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 24px;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.billing_cycle__tab.billing_cycle__tab_active {
|
|
background: #f0f4f9;
|
|
}
|
|
|
|
.billing_cycle__tab:focus-visible {
|
|
outline: 2px solid #6f47f5;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.billing_cycle__tab-inner {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
height: 32px;
|
|
}
|
|
|
|
.billing_cycle__label {
|
|
color: #666666;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 26px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.billing_cycle__tab.billing_cycle__tab_active .billing_cycle__label {
|
|
color: #6f47f5;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.billing_cycle__badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 16px;
|
|
min-width: 34px;
|
|
padding: 0 4px;
|
|
border-radius: 24px;
|
|
box-sizing: border-box;
|
|
background: #6f47f5;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.billing_cycle__tab:not(.billing_cycle__tab_active) .billing_cycle__badge {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.plan-grid-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.plan-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 313px);
|
|
align-items: start;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.plan_grid_item {
|
|
width: 313px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.plan_card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-width: 0;
|
|
gap: 0;
|
|
}
|
|
|
|
.plan_card.plan_card_new-user,
|
|
.plan_card.plan_card_recommended {
|
|
box-sizing: border-box;
|
|
border-radius: 26px 26px 0 0;
|
|
}
|
|
|
|
.plan_item__highlight-frame {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: calc(100% + 2px);
|
|
max-width: none;
|
|
min-width: 0;
|
|
margin: -32px 0 0 -1px;
|
|
border: 1px solid transparent;
|
|
border-radius: 26px;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
}
|
|
|
|
.plan_item__new-user-label {
|
|
border-color: #00dcca;
|
|
background: #00dcca;
|
|
}
|
|
|
|
.plan_item__recommended-label {
|
|
border-color: #6f47f5;
|
|
background: #6f47f5;
|
|
}
|
|
|
|
.plan_item__highlight-label {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 31px;
|
|
padding-top: 6px;
|
|
border-radius: 25px 25px 0 0;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
color: #333333;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_item__recommended-label .plan_item__highlight-label {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.plan_item__highlight-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 313px;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
margin: 0 auto;
|
|
border-radius: 26px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.plan_item__header {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-height: 266px;
|
|
padding: 20px;
|
|
border-radius: 26px;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.plan_card.plan_card_new-user .plan_item__header {
|
|
background: linear-gradient(180deg, #ddfefb 0%, #ffffff 24.04%);
|
|
}
|
|
|
|
.plan_card.plan_card_recommended .plan_item__header {
|
|
background: linear-gradient(180deg, #f3edff 0%, #ffffff 24.04%);
|
|
}
|
|
|
|
.plan_item__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
.plan_item__title {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.plan_item__title span {
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_item__discount-badge {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 66px;
|
|
max-width: 96px;
|
|
height: 20px;
|
|
padding: 0 10px;
|
|
overflow: hidden;
|
|
border-radius: 100px;
|
|
box-sizing: border-box;
|
|
background: #f3efff;
|
|
color: #6f47f5;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_card.plan_card_new-user .plan_item__discount-badge {
|
|
background: #f0fffe;
|
|
color: #12a397;
|
|
}
|
|
|
|
.plan_item__price-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.plan_item__price {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
min-height: 44px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.plan_item__price-symbol {
|
|
margin-top: 18px;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.plan_item__price-amount {
|
|
margin-left: 2px;
|
|
color: #333333;
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
line-height: 44px;
|
|
}
|
|
|
|
.plan_item__price-amount.plan_item__price-amount_free {
|
|
color: #999999;
|
|
}
|
|
|
|
.plan_item__price-unit {
|
|
margin-top: 18px;
|
|
margin-left: 4px;
|
|
color: #666666;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_item__price-original {
|
|
position: relative;
|
|
margin-top: 18px;
|
|
margin-left: 4px;
|
|
color: #999999;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
text-decoration: line-through;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_item__price-subtitle {
|
|
margin: 0;
|
|
color: #999999;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.plan_points {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 273px;
|
|
max-width: 100%;
|
|
height: 49px;
|
|
padding: 0 12px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
border-radius: 49px;
|
|
background: #f3efff;
|
|
}
|
|
|
|
.plan_card.plan_card_new-user .plan_points {
|
|
background: #f0fffe;
|
|
}
|
|
|
|
.plan_points__content {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_points__icon-wrap {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-right: 3px;
|
|
padding: 2px;
|
|
border-radius: 71px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.plan_points__icon-wrap .plan_points__icon {
|
|
display: block;
|
|
width: 15px;
|
|
height: 15px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.plan_points__value,
|
|
.plan_points__unit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_points__value {
|
|
margin-right: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.plan_points__unit {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.plan_item__cta.arco-btn {
|
|
display: block;
|
|
width: 100%;
|
|
height: 48px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 24px;
|
|
color: #ffffff !important;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 48px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.plan_item__cta.arco-btn:not(.arco-btn-disabled) {
|
|
background: #333333 !important;
|
|
}
|
|
|
|
.plan_item__cta.arco-btn-disabled,
|
|
.plan_item__cta.plan_item__cta_free.arco-btn-disabled {
|
|
border-color: #d9d9d9 !important;
|
|
background: #d9d9d9 !important;
|
|
color: #ffffff !important;
|
|
opacity: 1 !important;
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
.plan_tier_selector {
|
|
width: 100%;
|
|
max-width: 273px;
|
|
height: 44px;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.plan_tier_selector__labels {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 24px;
|
|
}
|
|
|
|
.plan_tier_selector__label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
height: 24px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #999999;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.plan_tier_selector__label:first-child {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.plan_tier_selector__label:last-child {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.plan_tier_selector__label.plan_tier_selector__label_active {
|
|
color: #333333;
|
|
}
|
|
|
|
.plan_tier_selector__label:focus-visible,
|
|
.plan_tier_selector__dot:focus-visible {
|
|
outline: 2px solid #6f47f5;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.plan_tier_selector__track {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 20px;
|
|
}
|
|
|
|
.plan_tier_selector__track-line {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 7.5px;
|
|
left: 7.5px;
|
|
height: 6px;
|
|
border-radius: 24px;
|
|
background: #d4d4d4;
|
|
}
|
|
|
|
.plan_tier_selector__track-line.plan_tier_selector__track-line_active {
|
|
right: auto;
|
|
z-index: 1;
|
|
background: #6f47f5;
|
|
}
|
|
|
|
.plan_tier_selector__dot {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex: 0 0 auto;
|
|
width: 15px;
|
|
height: 15px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 2px solid #999999;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.plan_tier_selector__dot.plan_tier_selector__dot_active {
|
|
border-color: #6f47f5;
|
|
background: #6f47f5;
|
|
}
|
|
|
|
.plan_commission {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-height: 24px;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
.plan_commission .desc_highlight {
|
|
margin-right: 0;
|
|
color: #6f47f5;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.plan_commission__text {
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
min-width: 0;
|
|
color: #333333;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_item__features {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: -58px;
|
|
padding: 70px 20px 20px;
|
|
border-radius: 26px;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.plan_goal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
min-height: 102px;
|
|
padding: 20px;
|
|
border-radius: 26px;
|
|
box-sizing: border-box;
|
|
background: #f9f6ff;
|
|
}
|
|
|
|
.plan_card.plan_card_new-user .plan_goal {
|
|
background: #f0fffe;
|
|
}
|
|
|
|
.plan_goal__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
max-width: 100%;
|
|
color: #6f47f5;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.plan_card.plan_card_new-user .plan_goal__title {
|
|
color: #049d90;
|
|
}
|
|
|
|
.plan_goal__icon {
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
width: 15px;
|
|
height: 15px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.plan_card.plan_card_new-user .plan_goal__icon {
|
|
filter: brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(800%) hue-rotate(135deg) brightness(92%) contrast(97%);
|
|
}
|
|
|
|
.plan_goal__title span {
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_goal__desc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 6px 0 0;
|
|
color: #333333;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.plan_goal__desc:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.plan_description {
|
|
width: 100%;
|
|
}
|
|
|
|
.plan_feature_header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.plan_feature_header__icon {
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
width: 16px;
|
|
height: 14px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.plan_feature_header__text {
|
|
display: block;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
color: #6f47f5;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 28px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.plan_description__list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.plan_feature {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
min-width: 0;
|
|
margin: 0;
|
|
color: #333333;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.plan_feature:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.plan_feature_divider {
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
margin: 20px 0;
|
|
padding: 0;
|
|
background: #d9d9db;
|
|
}
|
|
|
|
.plan_feature.plan_feature_section,
|
|
.plan_feature.plan_feature_title {
|
|
display: block;
|
|
margin: 0 0 10px;
|
|
color: #333333;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.plan_feature__check {
|
|
flex: 0 0 auto;
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 3px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.plan_feature__text {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
color: #333333;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.desc_highlight {
|
|
color: #6f47f5;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.plans {
|
|
.plans__points-row {
|
|
justify-content: flex-start;
|
|
overflow-x: auto;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.plan-grid-container {
|
|
justify-content: flex-start;
|
|
overflow-x: auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.plan-grid {
|
|
grid-template-columns: repeat(4, 313px);
|
|
width: max-content;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.plan_grid_item {
|
|
width: 313px;
|
|
}
|
|
}
|
|
}
|