/* ═══════════════════════════════════════════════════════════════
COURSE PRICING — course-pricing.css
Premium edtech pricing section — glassmorphism + neon glows
═══════════════════════════════════════════════════════════════ */
/* ── Google Fonts (add to your ) ──────────────────────────
─────────────────────────────────────────────────────────────── */
/* ── CSS VARIABLES ─────────────────────────────────────────────── */
:root {
--green: #1a5c38;
--lime: #7ec845;
--yellow: #f5c518;
--orange: #ff6b35;
--pink: #ff4d8d;
--purple: #7b2fff;
--sky: #00c2ff;
--cream: #fffbef;
--dark: #111a11;
--white: #ffffff;
--lavender: #d8adee;
--indigo: #591d76;
--font-display: 'Baloo 2', cursive;
--font-body: 'Nunito', sans-serif;
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 10px;
--shadow-sm: 0 4px 16px rgba(0,0,0,.08);
--shadow-md: 0 8px 32px rgba(0,0,0,.12);
--shadow-lg: 0 20px 60px rgba(0,0,0,.18);
/* Internal tokens */
--card-bg: rgba(255,255,255,0.055);
--card-border: rgba(255,255,255,0.13);
--card-radius: 28px;
--transition: 0.38s cubic-bezier(0.23,1,0.32,1);
}
/* ── SECTION SHELL ─────────────────────────────────────────────── */
.cp-section {
position: relative;
padding: 100px 0 120px;
background: #0a0f0a;
overflow: hidden;
font-family: var(--font-body);
color: var(--white);
}
/* Animated gradient mesh background */
.cp-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 15% 20%, rgba(123,47,255,0.18) 0%, transparent 55%),
radial-gradient(ellipse 70% 55% at 85% 15%, rgba(0,194,255,0.14) 0%, transparent 55%),
radial-gradient(ellipse 65% 50% at 50% 85%, rgba(126,200,69,0.12) 0%, transparent 55%),
radial-gradient(ellipse 55% 45% at 10% 80%, rgba(255,77,141,0.10) 0%, transparent 55%),
linear-gradient(145deg, #0a0f0a 0%, #0e1a0e 40%, #0c0e18 70%, #0a0f0a 100%);
z-index: 0;
animation: cp-bg-shift 12s ease-in-out infinite alternate;
}
@keyframes cp-bg-shift {
0% { filter: hue-rotate(0deg) brightness(1); }
100% { filter: hue-rotate(25deg) brightness(1.06); }
}
/* ── BACKGROUND BLOBS ───────────────────────────────────────────── */
.cp-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.35;
z-index: 0;
pointer-events: none;
animation: cp-blob-float 14s ease-in-out infinite alternate;
}
.cp-blob-1 {
width: 520px; height: 420px;
background: radial-gradient(circle, var(--purple) 0%, transparent 70%);
top: -140px; left: -100px;
animation-duration: 16s;
}
.cp-blob-2 {
width: 440px; height: 380px;
background: radial-gradient(circle, var(--sky) 0%, transparent 70%);
top: -80px; right: -80px;
opacity: 0.25;
animation-duration: 20s;
animation-delay: -6s;
}
.cp-blob-3 {
width: 480px; height: 360px;
background: radial-gradient(circle, var(--pink) 0%, transparent 70%);
bottom: -100px; left: 30%;
opacity: 0.20;
animation-duration: 18s;
animation-delay: -3s;
}
.cp-blob-4 {
width: 360px; height: 300px;
background: radial-gradient(circle, var(--lime) 0%, transparent 70%);
bottom: -80px; right: 10%;
opacity: 0.16;
animation-duration: 22s;
animation-delay: -9s;
}
@keyframes cp-blob-float {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -25px) scale(1.05); }
66% { transform: translate(-20px, 15px) scale(0.97); }
100% { transform: translate(15px, 30px) scale(1.03); }
}
/* ── GRID OVERLAY ───────────────────────────────────────────────── */
.cp-grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
background-size: 48px 48px;
z-index: 0;
pointer-events: none;
}
/* ── CONTAINER ──────────────────────────────────────────────────── */
.cp-section .container {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
/* ── SECTION HEADER ─────────────────────────────────────────────── */
.cp-header {
text-align: center;
margin-bottom: 64px;
}
.cp-eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--lime);
padding: 6px 18px;
border-radius: 30px;
background: rgba(126,200,69,0.12);
border: 1px solid rgba(126,200,69,0.25);
margin-bottom: 20px;
text-shadow: 0 0 12px rgba(126,200,69,0.5);
}
.cp-title {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 58px);
font-weight: 800;
line-height: 1.1;
color: var(--white);
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.cp-gradient-text {
background: linear-gradient(135deg, var(--lime) 0%, var(--sky) 50%, var(--purple) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: cp-text-shimmer 4s linear infinite;
}
@keyframes cp-text-shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.cp-subtitle {
font-size: 17px;
color: rgba(255,255,255,0.5);
max-width: 520px;
margin: 0 auto;
line-height: 1.7;
}
/* ── PRICING GRID ───────────────────────────────────────────────── */
.cp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
align-items: start;
margin-bottom: 56px;
}
/* Row 2: bumper card spans full row */
.cp-card--bumper {
grid-column: 1 / -1;
}
/* ── BASE CARD ──────────────────────────────────────────────────── */
.cp-card {
position: relative;
border-radius: var(--card-radius);
background: var(--card-bg);
border: 1px solid var(--card-border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition:
transform var(--transition),
box-shadow var(--transition),
border-color var(--transition);
overflow: hidden;
cursor: default;
}
.cp-card:hover {
transform: translateY(-10px);
}
/* Inner card padding */
.cp-card-inner {
position: relative;
z-index: 2;
padding: 32px 28px 28px;
display: flex;
flex-direction: column;
gap: 0;
}
/* ── GLOW LAYER (per card color) ───────────────────────────────── */
.cp-glow {
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
transition: opacity var(--transition);
pointer-events: none;
z-index: 1;
}
.cp-card:hover .cp-glow { opacity: 1; }
/* Sky card */
.cp-card--sky {
--c1: var(--sky);
--c2: #005f7a;
}
.cp-card--sky .cp-glow {
box-shadow: 0 0 60px rgba(0,194,255,0.3), inset 0 0 40px rgba(0,194,255,0.06);
}
.cp-card--sky:hover {
border-color: rgba(0,194,255,0.55);
box-shadow: 0 24px 80px rgba(0,194,255,0.25), var(--shadow-lg);
}
/* Pink card */
.cp-card--pink {
--c1: var(--pink);
--c2: #8b004d;
}
.cp-card--pink .cp-glow {
box-shadow: 0 0 60px rgba(255,77,141,0.3), inset 0 0 40px rgba(255,77,141,0.06);
}
.cp-card--pink:hover {
border-color: rgba(255,77,141,0.55);
box-shadow: 0 24px 80px rgba(255,77,141,0.25), var(--shadow-lg);
}
/* Purple card */
.cp-card--purple {
--c1: var(--purple);
--c2: #3a0088;
}
.cp-card--purple .cp-glow {
box-shadow: 0 0 60px rgba(123,47,255,0.3), inset 0 0 40px rgba(123,47,255,0.06);
}
.cp-card--purple:hover {
border-color: rgba(123,47,255,0.55);
box-shadow: 0 24px 80px rgba(123,47,255,0.25), var(--shadow-lg);
}
/* Orange card */
.cp-card--orange {
--c1: var(--orange);
--c2: #8b2800;
}
.cp-card--orange .cp-glow {
box-shadow: 0 0 60px rgba(255,107,53,0.3), inset 0 0 40px rgba(255,107,53,0.06);
}
.cp-card--orange:hover {
border-color: rgba(255,107,53,0.55);
box-shadow: 0 24px 80px rgba(255,107,53,0.25), var(--shadow-lg);
}
/* ── ICON WRAP ──────────────────────────────────────────────────── */
.cp-icon-wrap {
width: 60px; height: 60px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
position: relative;
flex-shrink: 0;
}
.cp-icon-wrap::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid rgba(255,255,255,0.2);
}
.cp-emoji { font-size: 26px; line-height: 1; }
.cp-icon-bg--sky { background: linear-gradient(135deg, rgba(0,194,255,0.25), rgba(0,194,255,0.08)); box-shadow: 0 8px 24px rgba(0,194,255,0.2); }
.cp-icon-bg--pink { background: linear-gradient(135deg, rgba(255,77,141,0.25), rgba(255,77,141,0.08)); box-shadow: 0 8px 24px rgba(255,77,141,0.2); }
.cp-icon-bg--purple { background: linear-gradient(135deg, rgba(123,47,255,0.25), rgba(123,47,255,0.08)); box-shadow: 0 8px 24px rgba(123,47,255,0.2); }
.cp-icon-bg--orange { background: linear-gradient(135deg, rgba(255,107,53,0.25), rgba(255,107,53,0.08)); box-shadow: 0 8px 24px rgba(255,107,53,0.2); }
/* ── CARD TYPOGRAPHY ────────────────────────────────────────────── */
.cp-card-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--white);
margin: 0 0 6px;
letter-spacing: -0.2px;
}
.cp-card-tagline {
font-size: 13px;
color: rgba(255,255,255,0.45);
margin: 0 0 22px;
line-height: 1.5;
font-style: italic;
}
/* ── FEATURES LIST ──────────────────────────────────────────────── */
.cp-features {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.cp-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: rgba(255,255,255,0.68);
font-weight: 500;
}
.cp-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
font-size: 10px;
font-weight: 800;
flex-shrink: 0;
color: var(--white);
}
/* Color the check per card */
.cp-card--sky .cp-check { background: var(--sky); box-shadow: 0 0 8px rgba(0,194,255,0.5); }
.cp-card--pink .cp-check { background: var(--pink); box-shadow: 0 0 8px rgba(255,77,141,0.5); }
.cp-card--purple .cp-check { background: var(--purple); box-shadow: 0 0 8px rgba(123,47,255,0.5); }
.cp-card--orange .cp-check { background: var(--orange); box-shadow: 0 0 8px rgba(255,107,53,0.5); }
/* ── PRICING BLOCK ──────────────────────────────────────────────── */
.cp-pricing {
margin-bottom: 22px;
}
.cp-old-price {
display: block;
font-size: 14px;
color: rgba(255,255,255,0.28);
text-decoration: line-through;
margin-bottom: 4px;
letter-spacing: 0.3px;
}
.cp-current-price {
display: flex;
align-items: flex-end;
gap: 3px;
line-height: 1;
margin-bottom: 4px;
}
.cp-currency {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: rgba(255,255,255,0.75);
align-self: flex-start;
padding-top: 6px;
}
.cp-amount {
font-family: var(--font-display);
font-size: 44px;
font-weight: 800;
color: var(--white);
letter-spacing: -1px;
}
/* Tint the price amount per card */
.cp-card--sky .cp-amount { color: var(--sky); }
.cp-card--pink .cp-amount { color: var(--pink); }
.cp-card--purple .cp-amount { color: var(--lavender); }
.cp-card--orange .cp-amount { color: var(--orange); }
.cp-period {
display: block;
font-size: 12px;
color: rgba(255,255,255,0.3);
margin-top: 2px;
letter-spacing: 0.3px;
}
/* ── ENROLL BUTTON ──────────────────────────────────────────────── */
.cp-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 22px;
border-radius: 50px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
text-decoration: none;
color: var(--white);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
filter 0.25s ease;
position: relative;
overflow: hidden;
letter-spacing: 0.3px;
border: none;
cursor: pointer;
}
/* Shimmer sweep on hover */
.cp-btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
transition: left 0.5s ease;
pointer-events: none;
}
.cp-btn:hover::before { left: 160%; }
.cp-btn:hover {
transform: translateY(-2px) scale(1.03);
}
.cp-btn-arrow {
width: 18px; height: 18px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.cp-btn:hover .cp-btn-arrow { transform: translateX(3px); }
/* Per-color buttons */
.cp-btn--sky {
background: linear-gradient(135deg, #00a8e0, #00d4ff);
box-shadow: 0 6px 24px rgba(0,194,255,0.35);
}
.cp-btn--sky:hover {
box-shadow: 0 10px 36px rgba(0,194,255,0.55);
filter: brightness(1.1);
}
.cp-btn--pink {
background: linear-gradient(135deg, #e8006a, #ff4d8d);
box-shadow: 0 6px 24px rgba(255,77,141,0.35);
}
.cp-btn--pink:hover {
box-shadow: 0 10px 36px rgba(255,77,141,0.55);
filter: brightness(1.1);
}
.cp-btn--purple {
background: linear-gradient(135deg, #5900cc, #7b2fff);
box-shadow: 0 6px 24px rgba(123,47,255,0.35);
}
.cp-btn--purple:hover {
box-shadow: 0 10px 36px rgba(123,47,255,0.55);
filter: brightness(1.1);
}
.cp-btn--orange {
background: linear-gradient(135deg, #e04a00, #ff6b35);
box-shadow: 0 6px 24px rgba(255,107,53,0.35);
}
.cp-btn--orange:hover {
box-shadow: 0 10px 36px rgba(255,107,53,0.55);
filter: brightness(1.1);
}
/* ── RIBBON BADGES ──────────────────────────────────────────────── */
.cp-ribbon {
position: absolute;
top: 18px;
right: -34px;
width: 140px;
text-align: center;
padding: 5px 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
transform: rotate(45deg);
transform-origin: center center;
z-index: 10;
pointer-events: none;
}
.cp-ribbon--trending { background: linear-gradient(90deg, #ff4500, #ff8c00); color: #fff; box-shadow: 0 3px 12px rgba(255,107,53,0.45); }
.cp-ribbon--popular { background: linear-gradient(90deg, var(--pink), #cc0055); color: #fff; box-shadow: 0 3px 12px rgba(255,77,141,0.45); }
.cp-ribbon--bestseller{ background: linear-gradient(90deg, var(--purple), #4a00cc); color: #fff; box-shadow: 0 3px 12px rgba(123,47,255,0.45); }
.cp-ribbon--combo { background: linear-gradient(90deg, #e04a00, #ff6b35); color: #fff; box-shadow: 0 3px 12px rgba(255,107,53,0.45); }
.cp-ribbon--bumper { display: none; } /* hidden on bumper — uses badge instead */
/* ── ═══════════════════════════════════════════════════════════════
BUMPER OFFER CARD — Full-width hero
═══════════════════════════════════════════════════════════════ */
.cp-card--bumper {
background: linear-gradient(
135deg,
rgba(255,209,0,0.06) 0%,
rgba(255,107,53,0.07) 30%,
rgba(123,47,255,0.07) 65%,
rgba(0,194,255,0.06) 100%
);
border: 1.5px solid rgba(255,209,0,0.3);
position: relative;
overflow: hidden;
}
/* Animated rainbow border */
.cp-card--bumper::before {
content: '';
position: absolute;
inset: -2px;
border-radius: calc(var(--card-radius) + 2px);
background: conic-gradient(
from var(--angle, 0deg),
var(--yellow),
var(--orange),
var(--pink),
var(--purple),
var(--sky),
var(--lime),
var(--yellow)
);
z-index: 0;
animation: cp-border-spin 4s linear infinite;
opacity: 0.6;
}
/* Mask to show only border line */
.cp-card--bumper::after {
content: '';
position: absolute;
inset: 2px;
border-radius: calc(var(--card-radius) - 1px);
background: #0e0e18;
z-index: 1;
}
@property --angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes cp-border-spin {
to { --angle: 360deg; }
}
.cp-card--bumper:hover {
transform: translateY(-8px);
box-shadow:
0 0 60px rgba(255,209,0,0.3),
0 0 120px rgba(255,107,53,0.2),
0 30px 80px rgba(0,0,0,0.5);
}
/* ── Bumper inner layout ── */
.cp-card--bumper .cp-card-inner {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 0 40px;
padding: 36px 44px 40px;
align-items: start;
}
/* Column 1: icon + title + tagline + badge */
.cp-bumper-badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--yellow);
background: rgba(245,197,24,0.12);
border: 1px solid rgba(245,197,24,0.35);
border-radius: 30px;
padding: 5px 14px;
margin-bottom: 14px;
text-shadow: 0 0 12px rgba(245,197,24,0.6);
box-shadow: 0 0 18px rgba(245,197,24,0.15);
grid-column: 1 / -1; /* spans full row */
width: fit-content;
animation: cp-badge-pulse 2.5s ease-in-out infinite;
}
@keyframes cp-badge-pulse {
0%, 100% { box-shadow: 0 0 18px rgba(245,197,24,0.15); }
50% { box-shadow: 0 0 32px rgba(245,197,24,0.40), 0 0 60px rgba(245,197,24,0.15); }
}
.cp-card--bumper .cp-icon-wrap {
margin-bottom: 12px;
width: 68px; height: 68px;
}
.cp-icon-bg--bumper {
background: linear-gradient(135deg, rgba(245,197,24,0.3), rgba(255,107,53,0.15));
box-shadow: 0 8px 30px rgba(245,197,24,0.3);
}
.cp-icon-bg--bumper .cp-emoji { font-size: 30px; }
.cp-card--bumper .cp-card-title {
font-size: 28px;
font-weight: 800;
background: linear-gradient(90deg, var(--yellow), var(--orange), var(--pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.cp-card--bumper .cp-card-tagline {
font-size: 14px;
color: rgba(255,255,255,0.5);
margin-bottom: 0;
}
/* ── Features column (bumper) ── */
.cp-features--bumper {
gap: 10px;
}
.cp-features--bumper li {
font-size: 14px;
color: rgba(255,255,255,0.75);
font-weight: 600;
}
.cp-check--bumper {
width: 22px; height: 22px;
background: linear-gradient(135deg, var(--yellow), var(--orange));
box-shadow: 0 0 10px rgba(245,197,24,0.5);
font-size: 11px;
}
/* ── Pricing column (bumper) ── */
.cp-savings-badge {
display: inline-block;
font-size: 13px;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #22c55e, #16a34a);
padding: 6px 16px;
border-radius: 30px;
margin-bottom: 14px;
box-shadow: 0 4px 16px rgba(34,197,94,0.35);
letter-spacing: 0.3px;
}
.cp-pricing--bumper { margin-bottom: 20px; }
.cp-current-price--bumper .cp-currency {
font-size: 28px;
color: var(--yellow);
}
.cp-current-price--bumper .cp-amount {
font-size: 60px;
background: linear-gradient(135deg, var(--yellow), var(--orange));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(245,197,24,0.5));
letter-spacing: -2px;
}
.cp-card--bumper .cp-old-price { font-size: 16px; }
.cp-card--bumper .cp-period { font-size: 13px; }
/* ── Bumper CTA button ── */
.cp-btn--bumper {
background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 50%, var(--pink) 100%);
background-size: 200% auto;
color: #1a0500;
font-size: 17px;
padding: 16px 30px;
border-radius: 50px;
box-shadow:
0 0 30px rgba(245,197,24,0.4),
0 8px 32px rgba(255,107,53,0.35);
animation: cp-btn-shimmer 3s linear infinite;
font-weight: 800;
}
@keyframes cp-btn-shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.cp-btn--bumper:hover {
transform: translateY(-3px) scale(1.04);
box-shadow:
0 0 50px rgba(245,197,24,0.55),
0 12px 40px rgba(255,107,53,0.45);
filter: brightness(1.08);
}
.cp-limited {
font-size: 12px;
color: rgba(255,255,255,0.4);
text-align: center;
margin-top: 10px;
letter-spacing: 0.3px;
}
/* ── GLOW BUMPER ── */
.cp-glow--bumper {
background: radial-gradient(ellipse at center, rgba(245,197,24,0.12) 0%, transparent 70%);
inset: 0;
position: absolute;
z-index: 1;
border-radius: inherit;
opacity: 0;
transition: opacity 0.5s ease;
}
.cp-card--bumper:hover .cp-glow--bumper { opacity: 1; }
/* ── BUMPER GLOW RING ── */
.cp-bumper-glow-ring {
position: absolute;
inset: -20px;
border-radius: calc(var(--card-radius) + 20px);
background: transparent;
box-shadow: 0 0 80px rgba(245,197,24,0.12), 0 0 160px rgba(255,107,53,0.08);
z-index: 0;
pointer-events: none;
animation: cp-ring-pulse 3s ease-in-out infinite;
}
@keyframes cp-ring-pulse {
0%, 100% { box-shadow: 0 0 80px rgba(245,197,24,0.12), 0 0 160px rgba(255,107,53,0.08); }
50% { box-shadow: 0 0 120px rgba(245,197,24,0.22), 0 0 200px rgba(255,107,53,0.14); }
}
/* ── SPARKLE FIELD ── */
.cp-sparkle-field {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
overflow: hidden;
}
.cp-sparkle {
position: absolute;
color: var(--yellow);
font-size: 14px;
opacity: 0;
animation: cp-sparkle-anim 3.5s ease-in-out infinite;
text-shadow: 0 0 8px var(--yellow);
}
.s1 { top: 12%; left: 8%; animation-delay: 0.0s; font-size: 12px; }
.s2 { top: 18%; right: 10%; animation-delay: 0.7s; font-size: 16px; }
.s3 { top: 55%; left: 4%; animation-delay: 1.4s; font-size: 10px; }
.s4 { top: 65%; right: 6%; animation-delay: 0.3s; font-size: 14px; }
.s5 { top: 82%; left: 16%; animation-delay: 2.0s; font-size: 12px; }
.s6 { top: 85%; right:18%; animation-delay: 1.1s; font-size: 10px; }
@keyframes cp-sparkle-anim {
0% { opacity: 0; transform: translateY(0) scale(0.6) rotate(0deg); }
20% { opacity: 0.9; transform: translateY(-6px) scale(1.1) rotate(15deg); }
40% { opacity: 0.6; transform: translateY(-12px) scale(0.9) rotate(30deg); }
60% { opacity: 0.8; transform: translateY(-8px) scale(1.0) rotate(-10deg); }
80% { opacity: 0.4; transform: translateY(-4px) scale(0.8) rotate(20deg); }
100% { opacity: 0; transform: translateY(0) scale(0.6) rotate(0deg); }
}
/* ── TRUST BAR ──────────────────────────────────────────────────── */
.cp-trust-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
padding: 20px 30px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
}
.cp-trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 600;
color: rgba(255,255,255,0.6);
padding: 6px 18px;
border-right: 1px solid rgba(255,255,255,0.1);
letter-spacing: 0.2px;
}
.cp-trust-item:last-child { border-right: none; }
.cp-trust-icon {
font-size: 18px;
line-height: 1;
}
/* ── REVEAL ANIMATION ───────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered delays */
.reveal.d1 { transition-delay: 0.05s; }
.reveal.d2 { transition-delay: 0.15s; }
.reveal.d3 { transition-delay: 0.25s; }
.reveal.d4 { transition-delay: 0.35s; }
.reveal.d5 { transition-delay: 0.45s; }
/* ── BUMPER CARD INNER GRID COLUMNS ─────────────────────────────── */
/* Col 1: icon + title + tagline */
.cp-card--bumper .cp-card-inner > .cp-bumper-badge { grid-column: 1 / -1; grid-row: 1; }
.cp-card--bumper .cp-card-inner > .cp-icon-wrap { grid-column: 1; grid-row: 2; }
.cp-card--bumper .cp-card-inner > .cp-card-title { grid-column: 1; grid-row: 3; }
.cp-card--bumper .cp-card-inner > .cp-card-tagline { grid-column: 1; grid-row: 4; }
/* Col 2: features list */
.cp-card--bumper .cp-features--bumper {
grid-column: 2;
grid-row: 2 / 6;
align-self: center;
margin: 0;
}
/* Col 3: savings + pricing + button + limited */
.cp-card--bumper .cp-savings-badge { grid-column: 3; grid-row: 2; align-self: start; }
.cp-card--bumper .cp-pricing--bumper { grid-column: 3; grid-row: 3; }
.cp-card--bumper .cp-btn--bumper { grid-column: 3; grid-row: 4; }
.cp-card--bumper .cp-limited { grid-column: 3; grid-row: 5; align-self: center; }
.cp-per-session {
display: inline-block;
margin-top: 8px;
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.35);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 3px 12px;
letter-spacing: 0.3px;
}
.cp-per-session span {
font-weight: 500;
opacity: 0.7;
}
/* ── RESPONSIVE ─────────────────────────────────────────────────── */
/* 1100px: 2-col grid for cards 1–4 */
@media (max-width: 1100px) {
.cp-grid {
grid-template-columns: repeat(2, 1fr);
}
.cp-card--bumper {
grid-column: 1 / -1;
}
.cp-card--bumper .cp-card-inner {
grid-template-columns: 1fr 1fr;
gap: 0 28px;
padding: 28px 32px 32px;
}
.cp-card--bumper .cp-features--bumper {
grid-column: 2;
grid-row: 2 / 5;
}
/* Pricing moves to col 1 row 5 */
.cp-card--bumper .cp-savings-badge { grid-column: 1; grid-row: 5; }
.cp-card--bumper .cp-pricing--bumper { grid-column: 1; grid-row: 6; }
.cp-card--bumper .cp-btn--bumper { grid-column: 1 / -1; grid-row: 7; }
.cp-card--bumper .cp-limited { grid-column: 1 / -1; grid-row: 8; }
}
/* 700px: 1-col */
@media (max-width: 700px) {
.cp-section { padding: 70px 0 90px; }
.cp-title { font-size: 32px; }
.cp-subtitle { font-size: 15px; }
.cp-header { margin-bottom: 44px; }
.cp-grid { grid-template-columns: 1fr; gap: 18px; }
.cp-card--bumper { grid-column: 1; }
.cp-card--bumper .cp-card-inner {
grid-template-columns: 1fr;
gap: 14px 0;
padding: 24px 22px 28px;
}
.cp-card--bumper .cp-card-inner > * { grid-column: 1 !important; grid-row: auto !important; }
.cp-card--bumper .cp-features--bumper { margin-top: 4px; }
.cp-current-price--bumper .cp-amount { font-size: 46px; }
.cp-trust-bar { gap: 0; flex-direction: column; align-items: flex-start; padding: 16px 20px; }
.cp-trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); width: 100%; padding: 10px 4px; }
.cp-trust-item:last-child { border-bottom: none; }
.cp-ribbon {
right: -30px;
top: 14px;
width: 120px;
font-size: 9px;
}
}
/* ── SCROLLBAR (optional polish) ────────────────────────────────── */
.cp-section ::-webkit-scrollbar { width: 5px; }
.cp-section ::-webkit-scrollbar-track { background: transparent; }
.cp-section ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }
/* ══════════════════════════════════════════
CERTIFICATE SECTION — COMPLETE FIX
══════════════════════════════════════════ */
.cert-section {
padding: 96px 0 80px;
background: #f0faf4;
position: relative;
overflow: hidden;
}
.cert-blob {
position: absolute;
border-radius: 50%;
opacity: .12;
pointer-events: none;
}
.cert-blob-1 {
width: 420px; height: 420px;
background: #38b000;
top: -120px; right: -80px;
}
.cert-blob-2 {
width: 280px; height: 280px;
background: #ffe066;
bottom: -60px; left: -40px;
}
/* Two-column layout */
.cert-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
margin-top: 56px;
}
/* ── LEFT: Steps — FIXED LAYOUT ── */
.cert-path-title {
font-size: 20px;
font-weight: 800;
color: #1a3a1a;
margin: 0 0 32px;
font-family: 'Baloo 2', sans-serif;
}
.cert-steps {
display: flex;
flex-direction: column;
gap: 0;
}
/* Each step = icon column + body column */
.cert-step {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
}
/* Left column: icon + connecting line */
.cert-step-left {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 48px;
}
.cert-step-icon {
width: 48px;
height: 48px;
background: #fff;
border: 2px solid #b8f0c8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
box-shadow: 0 2px 12px rgba(56,176,0,.12);
transition: transform .2s;
position: relative;
z-index: 1;
}
.cert-step:hover .cert-step-icon {
transform: scale(1.1);
}
.cert-step-icon--gold {
background: #fffdf0;
border-color: #f5c518;
box-shadow: 0 2px 16px rgba(245,197,24,.25);
}
/* Vertical connecting line — sits inside .cert-step-left, below the icon */
.cert-step-line {
width: 2px;
flex: 1;
min-height: 28px;
background: linear-gradient(to bottom, #b8f0c8, #e0f5e8);
margin-top: 4px;
margin-bottom: 4px;
}
/* Right column: text */
.cert-step-body {
padding-top: 10px;
padding-bottom: 24px;
}
.cert-step-body h4 {
font-size: 15px;
font-weight: 800;
color: #1a3a1a;
margin: 0 0 5px;
line-height: 1.3;
font-family: 'Nunito', sans-serif;
}
.cert-step-body p {
font-size: 13.5px;
color: #4a6a4a;
margin: 0;
line-height: 1.6;
font-family: 'Nunito', sans-serif;
}
/* Last step has no line */
.cert-step--last .cert-step-body {
padding-bottom: 0;
}
/* ── RIGHT: Certificate Image ── */
.cert-preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.cert-img-wrap {
position: relative;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 0 0 3px #d4f0dc,
0 0 0 6px #b8e8c8,
0 20px 48px rgba(56,176,0,.15);
/* Prevent drag highlight */
-webkit-user-select: none;
user-select: none;
}
/* The actual certificate image */
.cert-img {
display: block;
width: 100%;
max-width: 520px;
height: auto;
/* Block right-click / drag */
pointer-events: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
user-select: none;
/* Slightly blur on hover to discourage screenshotting */
}
/* Transparent overlay — blocks right-click save */
.cert-img-overlay {
position: absolute;
inset: 0;
z-index: 10;
background: transparent;
cursor: default;
/* Subtle watermark via CSS */
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 60px,
rgba(56,176,0,.04) 60px,
rgba(56,176,0,.04) 62px
);
}
.cert-note {
font-size: 12.5px;
color: #5a7a5a;
font-weight: 600;
letter-spacing: .2px;
margin: 0;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.cert-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.cert-preview {
order: -1;
}
}
@media (max-width: 480px) {
.cert-step-icon {
width: 40px;
height: 40px;
font-size: 18px;
}
.cert-step-left {
width: 40px;
}
}