| Server IP : 65.108.144.40 / Your IP : 216.73.217.165 Web Server : Apache/2.4.52 (Ubuntu) System : Linux ubuntu-8gb-hel1-1 5.15.0-173-generic #183-Ubuntu SMP Fri Mar 6 13:29:34 UTC 2026 x86_64 User : dev ( 1000) PHP Version : 8.2.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/successkpi/wp-content/themes/successkpi/blocks/pricing-plan-block/ |
Upload File : |
.sk-pricing-section {
background: linear-gradient(107deg, #F5F7FF 38.3%, #DCE3FF 97%);
padding: 120px 0 48px;
}
/* HEADER */
.sk-pricing-header h1 {
color: #000;
text-align: center;
letter-spacing: 1px;
}
.sk-pricing-header p {
color: #3A3E50;
text-align: center;
font-weight: 500;
margin-top: 11px;
}
/* TABS */
.sk-pricing-tabs {
border-radius: 6px;
border: 1px solid #D1D5DB;
background: #FFF;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.03);
padding: 2px 4px;
width: 232px;
margin: 35px auto 0;
display: flex;
justify-content: space-between;
}
.sk-pricing-tabs .tab-btn {
background: transparent;
border: none;
border-radius: 6px;
color: #111827;
font-size: 14px;
font-weight: 500;
padding: 6px 21px;
cursor: pointer;
}
.sk-pricing-tabs .tab-btn.active,
.sk-pricing-tabs.tab-btn:hover,
.sk-pricing-tabs .tab-btn:focus {
background: #0D4CCD;
color: #fff;
border-radius: 6px;
}
/* CONTENT */
.sk-pricing-content {
display: none;
margin-top: 45px;
padding: 0 32px;
}
.sk-pricing-content.active {
display: block;
}
/* GRID */
.sk-pricing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
align-items: start;
}
/* PRICE CARD */
.sk-pricing-plan {
padding: 32px 25px 50px;
border-radius: 24px;
background: radial-gradient(98.14% 57.88% at 111.64% 45.29%, rgba(253, 254, 255, 0.79) 0%, #FDFEFF 100%);
box-shadow: 0 4px 3px rgba(0, 124, 176, 0.04);
position: relative;
overflow: hidden;
transition: transform .3s ease-in-out;
}
/* DEFAULT TOP STRIP */
.sk-pricing-plan::before {
content: "";
width: 100%;
height: 8px;
background: #98DFAF;
position: absolute;
top: -1px;
left: 0;
}
/* HOVER */
.sk-pricing-plan:hover {
transform: translateY(-5px);
}
/* POPULAR PLAN */
.sk-pricing-plan.popular {
overflow: visible;
}
.sk-pricing-plan.popular::before {
display: none;
}
.sk-pricing-plan.popular .tag {
position: absolute;
top: -16px;
right: 0;
width: 100%;
background: #0D4CCD;
color: #fff;
height: 32px;
border-radius: 24px 24px 0 0;
padding: 4px 20px;
display: flex;
justify-content: center;
gap: 6px;
font-size: 16px;
font-weight: 700;
}
/* TITLE */
.sk-pricing-plan h3 {
color: #071621;
font-weight: 500;
margin-bottom: 13px;
}
/* PRICE */
.sk-pricing-plan .price {
color: #071621;
font-size: 48px;
font-weight: 500;
line-height: 60px;
}
.sk-pricing-plan .price span {
color: #355168;
font-size: 14px;
font-weight: 400;
line-height: 24px;
display: block;
}
/* DESCRIPTION */
.sk-pricing-plan .pricing-des {
color: #355168;
font-size: 12px;
font-weight: 400;
margin-top: 16px;
}
/* FEATURES LIST */
.sk-pricing-plan ul {
margin-top: 16px;
margin-bottom: 16px;
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
padding-left: 0;
}
.sk-pricing-plan ul li {
color: #355168;
font-size: 12px;
font-weight: 400;
line-height: 18px;
padding-left: 24px;
position: relative;
}
.sk-pricing-plan ul li::before {
content: "";
background-image: url('/wp-content/uploads/2026/06/price-icon.svg');
width: 16px;
height: 16px;
position: absolute;
left: 0;
}
/* BUTTON */
.sk-price-btn {
border-radius: 72px;
border: 1px solid #1269EC;
background: transparent;
box-shadow: 0 1px 2px rgba(8, 26, 40, 0.05);
color: #071621;
font-size: 16px;
font-weight: 700;
padding: 9px 20px;
width: 100%;
display: inline-flex;
justify-content: center;
transition: .2s ease-in-out;
text-decoration: none;
}
/* POPULAR button theme */
.sk-pricing-plan.popular .sk-price-btn {
border: 2px solid #234CC6;
background: linear-gradient(275deg, #00309D -18.74%, #234CC6 57.32%, #002882 123.61%);
color: white;
transition: 0s;
}
.sk-pricing-plan.popular .sk-price-btn:hover {
background: #002ecc;
color: #fff;
}
/* HOVER */
.sk-price-btn:hover {
background: #002ecc;
color: #fff;
}
/* COLOR VARIANTS PER PLAN */
.sk-pricing-plan:nth-child(2)::before {
background: #E9C103;
}
.sk-pricing-plan:nth-child(3)::before {
background: #5BBBAB;
}
.plans-below-text {
font-weight: 500;
font-size: 14px;
line-height: 18px;
}
/* RESPONSIVE */
@media (max-width: 1200px) {
.sk-pricing-grid {
grid-template-columns: repeat(2, 1fr);
row-gap: 32px;
}
.plans-below-text {
margin-top: 20px;
}
}
@media (max-width: 767px) {
.sk-pricing-grid {
grid-template-columns: 1fr;
}
.sk-pricing-content {
padding: 0px;
}
}