li.card-plan {
position: relative;
list-style: none;
border-radius: 30px;
}
.price-without-discount {
padding-bottom: 24px;
}
.plan-checkbox {
display: none;
}
.plan-checkbox:focus,
.plan-checkbox:active {
background: transparent;
-webkit-tap-highlight-color: transparent;
}
.plan-label:focus,
.plan-label:active {
background: transparent;
-webkit-tap-highlight-color: transparent;
}
.plan-label {
display: block;
position: relative;
border: 4px solid rgba(0, 0, 0, 0.06);
border-radius: 30px;
padding: 16px 30px 28px 32px;
cursor: pointer;
transition: all 0.3s ease;
}
.plan-checkbox:checked + .plan-label {
border-color: var(--tm-blue); }
.tm-button {
max-width: 164px; }
.tm-plan-title {
color: var(--tm-dark-blue);
font-size: 16px;
font-weight: 600;
line-height: 36px; letter-spacing: -0.2px;
}
.new-price {margin-bottom: -6px;font-size: 26px;font-weight: 800;line-height: 36px; letter-spacing: -0.2px;color: var(--tm-dark-blue);}
.old-price {
color: rgba(0, 0, 0, 0.20);
font-family: Nunito;
font-size: 18px;
font-weight: 800;
line-height: 36px; letter-spacing: -0.2px;
position: relative;
}
.container-cards > ul {
display: grid;
gap: 24px;
padding: 0;
grid-template-columns: 1fr 1fr;
margin-bottom: 34px;
}
.plan-label img {
position: absolute;
right: 24px;
top: 64px;
width: 60px;
}
.plan-image-hover { transition: all 0.4s ease;
transform: scale(0);
}
.plan-image-normal {
opacity: 1;
transition: all 0.4s ease;
}
.plan-checkbox:checked + .plan-label .plan-image-hover {
opacity: 1;
transform: scale(1);
transition: all 0.4s ease;
}
.plan-checkbox:checked + .plan-label .plan-image-normal { transition: all 0.4s ease;
}
.about-plan {
padding-left: 6px;
}
.about-plan ul {
display: flex;
flex-direction: column;
gap: 14px;
padding: 0;
list-style: none;
}
.container.container-cards {
max-width: 740px;
margin-top: 132px;
}
.old-price:before {
content: "";
width: 92px;
background: #cccccc;
height: 2px;
position: absolute;
top: 17px;
}
ul.feature-list {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
gap: 8px;
color: var(--tm_grafite);
margin-bottom: 54px;
font-size: 18px;
font-weight: 400;
line-height: 27px;
letter-spacing: .2px;
}
ul.feature-list li {
color: var(--tm_grafite);
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 400;
line-height: 27px;
letter-spacing: .2px;
}
span.checkmark {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none"><circle cx="9.73926" cy="9.5" r="9.5" fill="%235D31FF" fill-opacity="0.19"/><path d="M13.8955 7L8.39551 12L5.89551 9.72727" stroke="%235D31FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat;
font-size: 0;
width: 20px;
height: 20px;
display: inline-block;
background-size: 15px;
}
.about-plan strong {
color: black;
margin-bottom: 18px;
display: block;
font-size: 20px;
}
.tm-big-heading-desk {
width: 74%;
margin: auto;
}
p.text-center.tm-mb-30 {
width: 62%;
margin: auto;
padding-top: 24px;
}
.old-price.anual-plan:before {
width: 93px;
}
.check-box-plan {
width: 16px;
height: 16px;
margin-bottom: 8px;
transition: all 0.3s ease;
}
.plan-checkbox:checked + .plan-label .check-box-plan .checkmark-plan {
background: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 1.00006L3.1875 5.00006L1 3.18188" stroke="white" stroke-width="1.37043" stroke-linecap="round" stroke-linejoin="round"/></svg>') var(--tm-blue) center center no-repeat;
border-color: var(--tm-blue);
background-position: center;
background-size: 10px;
border-radius: 100px;
font-size: 0;
width: 16px;
height: 16px;
display: block;
transition: all 0.3s ease;
}
strong.student-name {
display: block;
text-align: right;
color: var(--tm-dark-blue);
}
p.mobile-home {
display: none;
}
strong.student-name {
display: block;
text-align: right;
color: var(--tm-dark-blue);
width: 100%;
}
.video-frame.vide-home {
padding: 0;
}
.feedbac-aluno {
display: flex;
justify-content: flex-start;
text-align: left;
min-height: 389px;
padding-top: 42px;
border: unset;
}
.btn-spacing {
margin-bottom: 80px;
}
@media (max-width: 768px) {
.plan-label img {
display: none;
}
.new-price {
font-size: 20px;
}
p.mobile-home {
display: block;
}
.desktop-home {
display: none;
}
.container-cards > ul {
gap: 10px;
}
.plan-label {
padding: 16px 14px 21px 14px;
}
.tm-plan-title {
margin-bottom: -4px;
}
.container {
padding: 24px;
}
.container.container-cards {
margin-top: 0px;
}
.tm-big-heading-desk {
width: 100%;
}
p.text-center.tm-mb-30 {
width: 100%;
}
.check-box-plan {
margin-bottom: 4px;
}
.feedbacks {
margin-bottom: 0;
}
.feedbac-aluno {
min-height: auto;
}
ul.feature-list li{
line-height: 24px;
font-size: 16px;
}
.new-price {
font-size: 20px;
}
li.card-plan {width: 100%;min-width: 133px;}
.old-price {
font-size: 14px;
margin-top: -10px;
}
.old-price.anual-plan:before {
width: 72px;
}
.old-price:before {
width: 72px;
}
.tm-plan-title {
margin-bottom: -6px;
}
.plan-checkbox:checked + .plan-label .check-box-plan .checkmark-plan {
background-size: 7px;
width: 14px;
height: 14px;
}
.video-frame.vide-home {
padding: 0 !important;
}
}