Ela_Front/src/components/tarif_head_automatic_files/PricingPlanCard.css

580 lines
11 KiB
CSS

.tarif_head_automatic_files {
@media (max-width: 768px) {
.pricing-card {
min-width: 100%;
max-width: 100%;
}
.popular-badge {
display: flex;
justify-content: center;
align-items: center;
background-color: #daf2ee;
padding: 10px;
margin: -20px -28px 20px;
}
.popular-badge span {
color: #0aa690;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.pricing-content {
display: flex;
flex-direction: column;
gap: 20px;
flex-grow: 1;
}
.plan-header {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.plan-title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 24px;
color: #16274f;
margin: 0;
}
.plan-subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
color: #4b5162;
margin: 0;
}
.price-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.price-wrapper {
display: flex;
align-items: baseline;
gap: 4px;
}
.price {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: -0.24px;
line-height: 24px;
color: #16274f;
}
.highlighted .price,
.highlighted .price-period,
.highlighted .sessions {
color: #0aa690;
}
.mysy_highlighted {
margin-top: 0px;
}
.price-period {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #16274f;
}
.sessions {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #16274f;
}
.choose-plan-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 10px;
border-radius: 200px;
border: 1px solid #c7c9ce;
background: transparent;
cursor: pointer;
margin-top: auto;
}
.choose-plan-btn span {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 122%;
color: #4b5162;
padding: 0 8px;
}
.position_detail_price{
margin-top: -20px;
margin-bottom: 5rem;
width: 100%;
float: left;
}
}
@media only screen and (min-width: 601px) and (max-width: 991px) {
.pricing-card {
display: flex;
flex-direction: column;
padding: 20px 2px;
background-color: #ffffff;
/* border: 1px solid #ecf1fc;*/
/* min-width: 200px;*/
max-width: 300px;
flex: 1;
position: relative;
box-sizing: border-box;
}
.popular-badge {
display: flex;
justify-content: center;
align-items: center;
background-color: #daf2ee;
padding: 10px;
margin: -20px -2px 0px;
}
.popular-badge span {
color: #0aa690;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.pricing-content {
display: flex;
flex-direction: column;
gap: 20px;
flex-grow: 1;
}
.plan-header {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.plan-title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: #16274f;
margin: 0;
}
.plan-subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
color: #4b5162;
margin: 0;
}
.price-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.price-wrapper {
display: flex;
align-items: baseline;
gap: 4px;
}
.price {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: -0.24px;
line-height: 24px;
color: #16274f;
}
.highlighted .price,
.highlighted .price-period,
.highlighted .sessions {
color: #0aa690;
}
.mysy_highlighted {
margin-top: 0px;
}
.price-period {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #16274f;
}
.sessions {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #16274f;
}
.choose-plan-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 2px;
border-radius: 200px;
border: 1px solid #c7c9ce;
background: transparent;
cursor: pointer;
margin-top: auto;
}
.choose-plan-btn span {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 122%;
color: #4b5162;
padding: 0 2px;
}
.position_detail_price{
margin-top: -20px;
margin-bottom: 5rem;
width: 100%;
float: left;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.pricing-card {
display: flex;
flex-direction: column;
padding: 20px 2px;
background-color: #ffffff;
/* border: 1px solid #ecf1fc;*/
/* min-width: 200px;*/
max-width: 300px;
flex: 1;
position: relative;
box-sizing: border-box;
}
.popular-badge {
display: flex;
justify-content: center;
align-items: center;
background-color: #daf2ee;
padding: 10px;
margin: -20px -2px 0px;
}
.popular-badge span {
color: #0aa690;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.pricing-content {
display: flex;
flex-direction: column;
gap: 20px;
flex-grow: 1;
}
.plan-header {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.plan-title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 24px;
color: #16274f;
margin: 0;
}
.plan-subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
color: #4b5162;
margin: 0;
}
.price-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.price-wrapper {
display: flex;
align-items: baseline;
gap: 4px;
}
.price {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: -0.24px;
line-height: 24px;
color: #16274f;
}
.highlighted .price,
.highlighted .price-period,
.highlighted .sessions {
color: #0aa690;
}
.mysy_highlighted {
margin-top: 10px;
}
.price-period {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #16274f;
}
.sessions {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #16274f;
}
.choose-plan-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 2px;
border-radius: 200px;
border: 1px solid #c7c9ce;
background: transparent;
cursor: pointer;
margin-top: auto;
}
.choose-plan-btn span {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 122%;
color: #4b5162;
padding: 0 2px;
}
.position_detail_price{
margin-top: -20px;
margin-bottom: 5rem;
width: 100%;
float: left;
}
}
@media only screen and (min-width: 1200px) {
.pricing-card {
display: flex;
flex-direction: column;
padding: 20px 28px;
background-color: #ffffff;
/* border: 1px solid #ecf1fc;*/
min-width: 200px;
max-width: 300px;
flex: 1;
position: relative;
box-sizing: border-box;
}
.popular-badge {
display: flex;
justify-content: center;
align-items: center;
background-color: #daf2ee;
padding: 10px;
margin: -20px -28px 20px;
}
.popular-badge span {
color: #0aa690;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.pricing-content {
display: flex;
flex-direction: column;
gap: 20px;
flex-grow: 1;
}
.plan-header {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.plan-title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 24px;
color: #16274f;
margin: 0;
}
.plan-subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 14px;
color: #4b5162;
margin: 0;
}
.price-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.price-wrapper {
display: flex;
align-items: baseline;
gap: 4px;
}
.price {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: -0.24px;
line-height: 24px;
color: #16274f;
}
.highlighted .price,
.highlighted .price-period,
.highlighted .sessions {
color: #0aa690;
}
.mysy_highlighted {
margin-top: 28px;
}
.price-period {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #16274f;
}
.sessions {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #16274f;
}
.choose-plan-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 10px;
border-radius: 200px;
border: 1px solid #c7c9ce;
background: transparent;
cursor: pointer;
margin-top: auto;
}
.choose-plan-btn span {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 122%;
color: #4b5162;
padding: 0 8px;
}
.position_detail_price{
margin-top: -10px;
margin-bottom: 5rem;
width: 100%;
float: left;
}
}
}