.tpb-grid {
--tpb-accent: var(--total-template-color, #0FB9DA);
display: grid;
grid-template-columns: repeat(var(--tpb-cols, 3), minmax(0, 1fr));
gap: 30px;
} .tpb-grid > *,
.tpb-timeline-item {
box-sizing: border-box;
} .editor-styles-wrapper .tpb-timeline,
.editor-styles-wrapper .tpb-plan-features {
margin-inline-start: 0;
padding: 0;
list-style: none;
}
.tpb-cols-1 { --tpb-cols: 1; }
.tpb-cols-2 { --tpb-cols: 2; }
.tpb-cols-3 { --tpb-cols: 3; }
.tpb-cols-4 { --tpb-cols: 4; }
.tpb-title {
margin: 0 0 8px;
font-size: 1.25em;
line-height: 1.3;
}
.tpb-title a {
color: inherit;
text-decoration: none;
}
.tpb-meta {
opacity: 0.75;
font-size: 0.9em;
}
.tpb-text p:last-child {
margin-bottom: 0;
}
.tpb-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.3);
font-size: 48px;
} .tpb-service {
padding: 30px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
text-align: center;
}
.tpb-service-icon,
.tpb-counter-icon {
display: inline-block;
margin-bottom: 15px;
color: var(--tpb-accent);
font-size: 42px;
line-height: 1;
} .tpb-member {
text-align: center;
}
.tpb-member-image {
aspect-ratio: 1;
margin-bottom: 15px;
overflow: hidden;
border-radius: 4px;
}
.tpb-member-image img {
width: 100%;
height: 100%;
object-fit: cover;
} .tpb-testimonial {
margin: 0;
padding: 30px;
background: rgba(0, 0, 0, 0.03);
border-radius: 4px;
} .tpb-testimonial blockquote.tpb-text {
position: relative;
margin: 0 0 20px;
padding: 0;
border: 0;
background: none;
font-size: 1em;
font-style: italic;
}
.tpb-testimonial blockquote.tpb-text:before {
content: "\201C";
display: block;
height: 30px;
color: var(--tpb-accent);
font-size: 60px;
font-style: normal;
line-height: 1;
}
.tpb-testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.tpb-testimonial-author img {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
}
.tpb-testimonial-author > span {
display: flex;
flex-direction: column;
}
.tpb-testimonial-author .tpb-title {
margin: 0;
font-size: 1em;
} .tpb-counter {
text-align: center;
}
.tpb-counter-number {
color: var(--tpb-accent);
font-size: 2.6em;
font-weight: 600;
line-height: 1.1;
} .tpb-plan {
display: flex;
flex-direction: column;
padding: 35px 30px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
text-align: center;
}
.tpb-plan-featured {
border-color: var(--tpb-accent);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.tpb-plan-price {
margin: 10px 0 20px;
color: var(--tpb-accent);
font-size: 2.4em;
font-weight: 600;
line-height: 1;
}
.tpb-plan-price span {
color: inherit;
font-size: 0.4em;
font-weight: 400;
opacity: 0.7;
}
.tpb-plan-features {
flex: 1;
margin: 0 0 25px;
padding: 0;
list-style: none;
}
.tpb-plan-features li {
padding: 8px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.tpb-button {
display: inline-block;
align-self: center;
padding: 10px 28px;
border-radius: 3px;
background: var(--tpb-accent);
color: #FFF;
text-decoration: none;
}
.tpb-button:hover,
.tpb-button:focus {
background: #222;
color: #FFF;
} .tpb-faq {
--tpb-accent: var(--total-template-color, #0FB9DA);
}
.tpb-faq-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tpb-faq-question {
position: relative;
padding: 18px 0;
padding-inline-end: 40px;
font-size: 1.1em;
font-weight: 500;
list-style: none;
cursor: pointer;
}
.tpb-faq-question::-webkit-details-marker {
display: none;
}
.tpb-faq-question:after {
content: "+";
position: absolute;
top: 50%;
inset-inline-end: 0;
transform: translateY(-50%);
color: var(--tpb-accent);
font-size: 1.5em;
line-height: 1;
}
.tpb-faq-item[open] .tpb-faq-question:after {
content: "\2212";
}
.tpb-faq-question:focus-visible {
outline: 2px solid var(--tpb-accent);
outline-offset: 2px;
}
.tpb-faq-answer {
padding-bottom: 18px;
padding-inline-end: 40px;
}
.tpb-faq-answer p:last-child {
margin-bottom: 0;
} .tpb-timeline {
--tpb-accent: var(--total-template-color, #0FB9DA);
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.tpb-timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 50%;
width: 2px;
margin-inline-start: -1px;
background: var(--tpb-accent);
}
.tpb-timeline-item {
position: relative;
width: 50%;
margin: 0;
padding-inline-end: 45px;
padding-bottom: 35px;
text-align: end;
}
.tpb-timeline-item:nth-child(even) {
margin-inline-start: 50%;
padding-inline-end: 0;
padding-inline-start: 45px;
text-align: start;
}
.tpb-timeline-dot {
position: absolute;
top: 5px;
inset-inline-end: -9px;
width: 18px;
height: 18px;
border: 3px solid var(--tpb-accent);
border-radius: 50%;
background: #FFF;
}
.tpb-timeline-item:nth-child(even) .tpb-timeline-dot {
inset-inline-end: auto;
inset-inline-start: -9px;
}
.tpb-timeline-label {
display: inline-block;
margin-bottom: 6px;
color: var(--tpb-accent);
font-weight: 600;
}
.tpb-timeline-one-side:before {
inset-inline-start: 9px;
}
.tpb-timeline-one-side .tpb-timeline-item,
.tpb-timeline-one-side .tpb-timeline-item:nth-child(even) {
width: auto;
margin-inline-start: 0;
padding-inline-end: 0;
padding-inline-start: 40px;
text-align: start;
}
.tpb-timeline-one-side .tpb-timeline-dot,
.tpb-timeline-one-side .tpb-timeline-item:nth-child(even) .tpb-timeline-dot {
inset-inline-end: auto;
inset-inline-start: 0;
} .tpb-portfolio {
display: block;
color: inherit;
text-decoration: none;
}
.tpb-portfolio-image {
display: block;
aspect-ratio: 1;
overflow: hidden;
border-radius: 4px;
}
.tpb-portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.tpb-portfolio:hover img,
.tpb-portfolio:focus-visible img {
transform: scale(1.05);
}
.tpb-portfolio-title {
display: block;
margin-top: 10px;
font-weight: 500;
}
@media screen and (max-width: 1000px) {
.tpb-cols-3,
.tpb-cols-4 {
--tpb-cols: 2;
}
}
@media screen and (max-width: 767px) {
.tpb-grid {
--tpb-cols: 1;
} .wp-block-totalplus-team:not(.tpb-cols-1),
.wp-block-totalplus-counter:not(.tpb-cols-1) {
--tpb-cols: 2;
gap: 20px;
}
.tpb-timeline:before {
inset-inline-start: 9px;
}
.tpb-timeline-item,
.tpb-timeline-item:nth-child(even) {
width: auto;
margin-inline-start: 0;
padding-inline-end: 0;
padding-inline-start: 40px;
text-align: start;
}
.tpb-timeline-dot,
.tpb-timeline-item:nth-child(even) .tpb-timeline-dot {
inset-inline-end: auto;
inset-inline-start: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.tpb-portfolio-image img {
transition: none;
}
} .tpb-ai-notice {
margin: 12px 0 0;
}
.tpb-ai-tip {
margin: 0 0 16px;
}