/* ============================================================
CHILDREN'S MINISTRY LESSONS — GLOBAL DESIGN SYSTEM
============================================================ */
/* Poppins is loaded via in each page's (faster than an @import,
which the browser can't discover until styles.css itself has downloaded). */
/* ─── GLORY KIDS BRAND DESIGN SYSTEM ────────────────────────────
Official palette + Poppins-only typography.
Older token names below are kept for compatibility but now
resolve to brand colours. */
:root {
/* ── Official brand palette ── */
--glory-navy: #06245A; /* primary dark / backgrounds */
--glory-teal: #00BFC4; /* primary accent / energy */
--glory-gold: #FFB000; /* highlight / joy */
--glory-coral: #FF4B32; /* warm accent / passion */
--glory-purple: #66249A; /* creativity */
--glory-charcoal: #17191C; /* premium dark */
--glory-cream: #FFF9ED; /* warm neutral */
--cream: #FFF9ED;
/* ── Primary action = brand coral ── */
--primary: #FF4B32;
--primary-dark: #E13C24;
--primary-darker: #C43420;
--primary-light: rgba(255,75,50,0.15);
--primary-lighter:rgba(255,75,50,0.08);
--gold: #FFB000;
--gold-dark: #E09E00;
--gold-light: rgba(255,176,0,0.15);
--coral: #FF4B32;
--coral-dark: #E13C24;
--coral-light: rgba(255,75,50,0.15);
--purple: #66249A;
--purple-dark: #4E1A78;
--purple-light: rgba(102,36,154,0.15);
--teal: #00BFC4;
--teal-light: rgba(0,191,196,0.15);
--color-teal-primary: #00BFC4;
--color-teal-light: #33CDD1;
--color-teal-dark: #009BA0;
--color-sage: #00BFC4;
--color-orange-primary: #FF4B32;
--green: #00BFC4;
--green-dark: #009BA0;
--green-light: rgba(0,191,196,0.15);
--rose: #FF4B32;
--rose-light: rgba(255,75,50,0.15);
--navy: #06245A;
--gray-900: #FFF9ED;
--gray-700: #E6E9F1;
--gray-600: #C7CFDF;
--gray-500: #A6B1C7;
--gray-400: #8B97AF;
--gray-300: #6C7A96;
--gray-200: rgba(255,255,255,0.15);
--gray-100: rgba(255,255,255,0.08);
--gray-50: #17191C;
--white: #FFF9ED;
/* Brand dark theme — charcoal (was navy #06245A / #041A44 / #0B2E67) */
--color-bg: #17191C;
--color-darkest: #0E0F12;
--color-card: #22252A;
--color-card-hover: #2C2F36;
--color-border: rgba(255,255,255,0.14);
--font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
--font-body: 'Poppins', system-ui, -apple-system, sans-serif;
--font-serif: 'Poppins', Georgia, serif;
--radius-sm: 6px;
--radius: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--radius-full:9999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
--shadow: 0 4px 16px rgba(0,0,0,0.3);
--shadow-md: 0 8px 30px rgba(0,0,0,0.4);
--shadow-lg: 0 20px 50px rgba(0,0,0,0.5);
--shadow-purple: 0 10px 30px rgba(102,36,154,0.35);
--shadow-gold: 0 10px 30px rgba(255,176,0,0.35);
--transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
--z-nav: 1000;
}
/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
font-family: var(--font-body);
color: var(--gray-700);
background: var(--color-card);
line-height: 1.6;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
/* ─── SCROLL PROGRESS BAR ────────────────────────────────────── */
#progress-bar {
position: fixed; top: 0; left: 0; height: 3px; width: 0%;
background: linear-gradient(90deg, var(--primary), var(--gold));
z-index: 9999; transition: width 0.1s linear;
}
/* ─── CONTAINER ──────────────────────────────────────────────── */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.container--narrow { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
.container--wide { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
/* ─── TYPOGRAPHY — Poppins only (400 body · 600 labels/buttons · 700 subheads · 800 H1) ── */
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-heading);
line-height: 1.15;
color: var(--white);
font-weight: 700;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 700; }
p { font-size: 1.05rem; line-height: 1.75; font-weight: 400; }
.section-label {
display: inline-block;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--primary);
background: var(--primary-light);
padding: 0.4rem 1rem;
border-radius: var(--radius-full);
margin-bottom: 1rem;
}
.section-label--gold { color: var(--gold-dark); background: var(--gold-light); }
.section-label--coral { color: var(--coral-dark); background: var(--coral-light); }
.section-label--teal { color: var(--teal); background: var(--teal-light); }
.section-heading {
text-align: center;
margin-bottom: 1rem;
}
.section-subheading {
text-align: center;
color: var(--gray-500);
max-width: 600px;
margin: 0 auto 3rem;
font-size: 1.1rem;
}
.highlight {
position: relative;
display: inline-block;
color: var(--primary);
}
.highlight::after {
content: '';
position: absolute;
bottom: -4px; left: 0; right: 0;
height: 6px;
background: linear-gradient(90deg, var(--gold), var(--coral));
border-radius: var(--radius-full);
}
/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 2rem;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
transition: var(--transition);
cursor: pointer;
border: 2px solid transparent;
white-space: nowrap;
}
.btn--lg { padding: 1.05rem 2.4rem; font-size: 1.05rem; }
.btn--sm { padding: 0.55rem 1.25rem; font-size: 0.875rem; }
.btn--primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--white);
box-shadow: 0 8px 22px rgba(255,75,50,0.4);
}
.btn--primary:hover {
transform: translateY(-2px) scale(1.015);
box-shadow: 0 14px 32px rgba(255,75,50,0.55);
filter: brightness(1.06);
}
.btn--gold {
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--white);
box-shadow: var(--shadow-gold);
}
.btn--gold:hover {
transform: translateY(-2px) scale(1.015);
box-shadow: 0 14px 32px rgba(255,176,0,0.5);
filter: brightness(1.06);
}
.btn--coral {
background: var(--coral);
color: var(--white);
box-shadow: 0 10px 30px rgba(242,101,34,0.3);
}
.btn--coral:hover { background: var(--coral-dark); transform: translateY(-2px); }
.btn--outline {
background: transparent;
color: var(--primary);
border-color: var(--primary);
}
.btn--outline:hover {
background: var(--primary);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(255,75,50,0.35);
}
.btn--outline-white {
background: rgba(255,255,255,0.1);
color: var(--white);
border-color: rgba(255,255,255,0.5);
backdrop-filter: blur(8px);
}
.btn--outline-white:hover {
background: rgba(255,75,50,0.12);
color: var(--white);
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(255,75,50,0.3);
}
.btn--ghost {
background: transparent;
color: var(--gray-700);
}
.btn--ghost:hover { background: var(--gray-100); }
.btn svg, .btn .btn-icon { transition: transform 0.3s ease; }
.btn:hover svg, .btn:hover .btn-icon { transform: translateX(4px); }
/* ─── NAVIGATION ─────────────────────────────────────────────── */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: var(--z-nav);
padding: 1.25rem 0;
transition: var(--transition);
}
.nav.scrolled {
background: rgba(6,36,90,0.92);
backdrop-filter: blur(16px);
box-shadow: 0 2px 20px rgba(0,0,0,0.35);
padding: 0.85rem 0;
}
.nav { transition: var(--transition), transform 0.35s ease; }
.nav--hidden { transform: translateY(-100%); }
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
flex-wrap: nowrap;
}
.nav__logo {
display: flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.1rem;
color: var(--white);
transition: var(--transition);
flex-shrink: 0;
white-space: nowrap;
}
.nav.scrolled .nav__logo { color: var(--white); }
.nav__logo-icon {
width: 38px; height: 38px;
background: linear-gradient(135deg, var(--primary), var(--gold));
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.nav__logo-img {
width: 42px; height: 42px;
object-fit: contain;
flex-shrink: 0;
display: block;
}
.nav__logo-text span { color: var(--gold); }
.nav.scrolled .nav__logo-text span { color: var(--primary); }
.nav__links {
display: flex;
align-items: center;
gap: 0.15rem;
flex-wrap: nowrap;
}
.nav__link {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.85rem;
color: rgba(255,255,255,0.9);
padding: 0.5rem 0.65rem;
border-radius: var(--radius);
transition: var(--transition);
position: relative;
white-space: nowrap;
}
.nav.scrolled .nav__link { color: var(--gray-700); }
.nav__link:hover, .nav__link.active {
color: var(--white);
background: var(--primary);
}
.nav.scrolled .nav__link:hover, .nav.scrolled .nav__link.active {
color: var(--white);
background: var(--primary);
}
.nav__dropdown { position: relative; }
.nav__dropdown-menu {
position: absolute;
top: calc(100% + 0.75rem);
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--color-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 0.75rem;
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 10;
}
.nav__dropdown:hover .nav__dropdown-menu {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__dropdown-item {
display: flex; align-items: center; gap: 0.65rem;
padding: 0.65rem 0.9rem;
border-radius: var(--radius);
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 600;
color: var(--gray-700);
transition: var(--transition);
white-space: nowrap;
}
.nav__dropdown-item:hover { background: var(--primary-lighter); color: var(--primary); }
.nav__dropdown-item span { font-size: 1.1rem; }
.nav__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; flex-shrink: 0; }
.nav__cta {
background: var(--gold);
color: var(--white) !important;
border-radius: var(--radius-full);
padding: 0.6rem 1.35rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.875rem;
white-space: nowrap;
display: inline-flex;
transition: var(--transition);
box-shadow: var(--shadow-gold);
}
.nav__cta:hover { transform: translateY(-2px); background: var(--gold-dark) !important; }
.nav__hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.nav__hamburger span {
display: block;
width: 24px; height: 2px;
background: var(--color-card);
border-radius: 2px;
transition: var(--transition);
}
.nav.scrolled .nav__hamburger span { background: var(--white); }
.nav__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
/* Mobile nav */
.nav__mobile {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--color-card);
z-index: calc(var(--z-nav) - 1);
padding: 6rem 2rem 2rem;
flex-direction: column;
gap: 0.5rem;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.nav__mobile.open { transform: translateX(0); display: flex; }
.nav__backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: calc(var(--z-nav) - 2);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.nav__backdrop.open { opacity: 1; pointer-events: auto; }
@media (min-width: 1221px) {
.nav__backdrop { display: none; }
}
.nav__mobile-link {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.4rem;
color: var(--white);
padding: 0.85rem 0;
border-bottom: 1px solid var(--gray-100);
transition: var(--transition);
}
.nav__mobile-link:hover { color: var(--primary); padding-left: 0.5rem; }
.nav__mobile-cta {
margin-top: 1.5rem;
text-align: center;
}
/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
min-height: 100vh;
background: linear-gradient(180deg, #17191c 0%, #26282e 100%);
position: relative;
display: flex;
align-items: center;
padding: 8rem 0 5rem;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 70% 50%, rgba(245,166,35,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 10% 80%, rgba(242,101,34,0.06) 0%, transparent 50%);
}
.hero__shapes { position: absolute; inset: 0; pointer-events: none; }
.shape {
position: absolute;
border-radius: 50%;
opacity: 0.15;
animation: floatShape 6s ease-in-out infinite;
}
.shape--1 {
width: 400px; height: 400px;
background: var(--gold);
top: -100px; right: -100px;
animation-delay: 0s;
}
.shape--2 {
width: 200px; height: 200px;
background: var(--coral);
bottom: 10%; left: -60px;
animation-delay: 2s;
}
.shape--3 {
width: 120px; height: 120px;
background: var(--color-card);
top: 30%; right: 20%;
animation-delay: 1s;
border-radius: var(--radius-lg);
transform: rotate(20deg);
}
.shape--4 {
width: 80px; height: 80px;
background: var(--gold);
top: 20%; left: 25%;
animation-delay: 3s;
border-radius: var(--radius-lg);
transform: rotate(-15deg);
}
.shape--5 {
width: 60px; height: 60px;
background: var(--color-card);
bottom: 25%; right: 30%;
animation-delay: 4s;
}
@keyframes floatShape {
0%,100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
/* Stars */
.stars { position: absolute; inset: 0; pointer-events: none; }
.star {
position: absolute;
width: 6px; height: 6px;
background: var(--color-card);
border-radius: 50%;
animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
0%,100% { opacity: 0.2; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.4); }
}
.hero__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.4);
color: var(--gold);
padding: 0.45rem 1.1rem;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1.5rem;
animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
0%,100% { box-shadow: 0 0 0 0 rgba(245,166,35,0.3); }
50% { box-shadow: 0 0 0 8px rgba(245,166,35,0); }
}
.hero__title {
color: var(--white);
font-size: clamp(2.8rem, 5vw, 4.8rem);
line-height: 1.08;
margin-bottom: 1.5rem;
}
.hero__title .hero-accent {
background: linear-gradient(90deg, var(--gold), var(--coral));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero__title--long {
font-size: clamp(2rem, 3.4vw, 3rem);
line-height: 1.25;
}
.hero__title--long .hero__title-sub {
display: block;
font-size: 0.6em;
font-weight: 500;
color: rgba(255,255,255,0.75);
margin-top: 0.4rem;
}
.hero__title--clean {
font-size: 52px;
font-weight: 700;
line-height: 1.15;
letter-spacing: 1.5px;
color: #FFFFFF;
text-align: left;
margin-bottom: 0;
max-width: 90%;
}
.hero__subtitle {
color: rgba(255,255,255,0.8);
font-size: 1.15rem;
max-width: 520px;
margin-bottom: 2.5rem;
line-height: 1.8;
}
.hero__subtitle--clean {
font-size: 18px;
font-weight: 400;
color: rgba(255,255,255,0.85);
max-width: 85%;
margin-top: 24px;
margin-bottom: 0;
line-height: 1.6;
}
.hero__cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.hero__cta--clean {
gap: 16px;
margin-top: 32px;
margin-bottom: 0;
}
.hero__cta--clean .btn--coral {
background: #FF4B32;
padding: 16px 40px;
border-radius: 28px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: 0 8px 16px rgba(255,127,63,0.2);
transition: all 200ms cubic-bezier(0.33,1,0.68,1);
}
.hero__cta--clean .btn--coral:hover {
background: #E13C24;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(255,127,63,0.3);
}
.hero__cta--clean .btn--outline-white {
background: transparent;
border: 2px solid #FFFFFF;
padding: 14px 36px;
border-radius: 28px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 200ms cubic-bezier(0.33,1,0.68,1);
backdrop-filter: none;
}
.hero__cta--clean .btn--outline-white:hover {
background: rgba(255,255,255,0.1);
border-color: #FFFFFF;
color: #FFFFFF;
transform: translateY(-2px);
}
.btn--pill { border-radius: 24px; }
.hero__social-proof {
display: flex;
align-items: center;
gap: 1rem;
}
.hero__social-proof--clean {
margin-top: 24px;
}
.hero__social-proof--clean p {
font-size: 14px;
color: rgba(255,255,255,0.75);
}
.hero__visual--empty {
display: block;
}
/* ─── HERO PHOTO (simple rounded card, fixed size) ─────────────── */
.hero__visual--card {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero__photo--card {
width: 450px;
height: 380px;
object-fit: cover;
object-position: center;
border-radius: 32px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
display: block;
}
.hero--photo .hero__content { max-width: 560px; position: relative; z-index: 2; }
.hero--photo .hero__shapes, .hero--photo .stars { display: none; }
/* ─── HERO ENTRANCE ANIMATIONS ──────────────────────────────────── */
@keyframes heroFadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeInScale {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.hero--photo .hero__title--clean { opacity: 0; animation: heroFadeInUp 800ms 100ms ease-out forwards; }
.hero--photo .hero__subtitle--clean { opacity: 0; animation: heroFadeInUp 800ms 250ms ease-out forwards; }
.hero--photo .hero__cta--clean { opacity: 0; animation: heroFadeInUp 800ms 400ms ease-out forwards; }
.hero--photo .hero__social-proof--clean { opacity: 0; animation: heroFadeInUp 800ms 550ms ease-out forwards; }
.hero--photo .hero__visual--card { opacity: 0; animation: heroFadeInScale 900ms 150ms ease-out forwards; }
@media (max-width: 1023px) {
.hero--photo .hero__title--clean { font-size: 42px; line-height: 1.2; letter-spacing: 1px; }
.hero--photo .hero__subtitle--clean { font-size: 16px; }
.hero__photo--card { width: 360px; height: 300px; border-radius: 24px; box-shadow: 0 15px 30px rgba(0,0,0,0.25); }
}
@media (max-width: 768px) {
.hero--photo .hero__title--clean { font-size: 32px; line-height: 1.25; letter-spacing: 0.5px; max-width: 100%; }
.hero--photo .hero__subtitle--clean { font-size: 15px; max-width: 100%; }
.hero--photo .hero__cta--clean { flex-direction: column; gap: 12px; }
.hero--photo .hero__cta--clean .btn--coral,
.hero--photo .hero__cta--clean .btn--outline-white { width: 100%; justify-content: center; padding: 14px 24px; font-size: 15px; border-radius: 24px; }
.hero__visual--card { display: none; }
}
.hero__avatars {
display: flex;
}
.hero__avatar {
width: 36px; height: 36px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.5);
margin-left: -10px;
font-size: 1.1rem;
background: linear-gradient(135deg, var(--primary-light), var(--gold-light));
display: flex; align-items: center; justify-content: center;
}
.hero__avatars .hero__avatar:first-child { margin-left: 0; }
.hero__social-proof p {
color: rgba(255,255,255,0.75);
font-size: 0.9rem;
}
.hero__social-proof strong { color: var(--white); }
.hero__visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.hero__card-stack { position: relative; width: 400px; height: 420px; }
.hero__card {
position: absolute;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(16px);
border-radius: var(--radius-xl);
padding: 1.5rem;
transition: var(--transition);
}
.hero__card--main {
bottom: 0; left: 0; right: 0;
background: var(--color-card);
padding: 2rem;
}
.hero__card--float1 {
top: 0; right: 0;
width: 180px;
animation: cardFloat1 5s ease-in-out infinite;
}
.hero__card--float2 {
top: 110px; left: 0;
width: 160px;
animation: cardFloat2 6s ease-in-out infinite;
}
@keyframes cardFloat1 {
0%,100% { transform: translateY(0) rotate(3deg); }
50% { transform: translateY(-12px) rotate(3deg); }
}
@keyframes cardFloat2 {
0%,100% { transform: translateY(0) rotate(-5deg); }
50% { transform: translateY(-16px) rotate(-5deg); }
}
.hero-stat {
text-align: center;
padding: 0.75rem;
}
.hero-stat__num {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 900;
color: var(--white);
display: block;
}
.hero-stat__label {
font-size: 0.75rem;
color: var(--gray-500);
font-weight: 500;
}
.membership-preview {
display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;
}
.membership-preview__icon {
width: 52px; height: 52px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.membership-preview__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1rem;
color: var(--white);
}
.membership-preview__price {
font-size: 0.85rem;
color: var(--gray-500);
}
.membership-preview__price strong {
color: var(--primary);
font-family: var(--font-heading);
font-weight: 700;
}
.membership-preview__features { display: flex; flex-direction: column; gap: 0.5rem; }
.membership-preview__feat {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.85rem;
color: var(--gray-700);
font-weight: 500;
}
.membership-preview__feat::before {
content: '✓';
width: 18px; height: 18px;
background: var(--green-light);
color: var(--green);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.7rem;
font-weight: 700;
flex-shrink: 0;
}
/* Scroll indicator */
.hero__scroll {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.5);
font-size: 0.75rem;
font-family: var(--font-heading);
letter-spacing: 0.1em;
z-index: 1;
}
.scroll-mouse {
width: 24px; height: 38px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: var(--radius-full);
position: relative;
}
.scroll-mouse::before {
content: '';
position: absolute;
width: 4px; height: 8px;
background: rgba(255,255,255,0.6);
border-radius: 2px;
top: 6px; left: 50%; transform: translateX(-50%);
animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
0%,100% { opacity: 1; top: 6px; }
100% { opacity: 0; top: 22px; }
}
/* ─── STATS BAR ──────────────────────────────────────────────── */
.stats-bar {
background: var(--navy);
padding: 2rem 0;
}
.stats-bar__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.stat-item__number {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 900;
color: var(--gold);
display: block;
line-height: 1;
}
.stat-item__label {
color: rgba(255,255,255,0.65);
font-size: 0.85rem;
margin-top: 0.35rem;
}
.stat-divider {
width: 1px;
background: rgba(255,255,255,0.1);
}
/* ─── SECTIONS ───────────────────────────────────────────────── */
section { padding: 5rem 0; }
.section--gray { background: var(--gray-50); }
.section--light { background: var(--color-card); }
.section--navy { background: var(--navy); }
.section--purple { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
/* ─── FEATURE CARDS ──────────────────────────────────────────── */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.feature-card {
background: var(--color-card);
border-radius: var(--radius-xl);
padding: 2rem;
box-shadow: var(--shadow);
border: 1px solid var(--gray-100);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--bg-gradient, linear-gradient(90deg, var(--primary), var(--gold)));
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.feature-card__icon {
width: 60px; height: 60px;
background: var(--icon-bg, var(--primary-light));
border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
font-size: 1.75rem;
margin-bottom: 1.25rem;
}
.feature-card__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.65rem;
}
.feature-card__desc {
color: var(--gray-500);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1.25rem;
}
.feature-card__link {
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 700;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: var(--transition);
}
.feature-card__link:hover { gap: 0.65rem; }
/* ─── MEMBERSHIP SPOTLIGHT ───────────────────────────────────── */
.membership-spotlight {
background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary) 60%, #66249A 100%);
border-radius: var(--radius-xl);
padding: 4rem;
color: var(--white);
position: relative;
overflow: hidden;
}
.membership-spotlight::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(245,166,35,0.2), transparent 70%);
}
.membership-spotlight__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.membership-spotlight__tag {
display: inline-flex; align-items: center; gap: 0.5rem;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.4);
color: var(--gold);
padding: 0.35rem 1rem;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1.25rem;
}
.membership-spotlight__title {
color: var(--white);
font-size: clamp(2rem, 3vw, 2.8rem);
margin-bottom: 1rem;
}
.membership-spotlight__desc {
color: rgba(255,255,255,0.8);
margin-bottom: 2rem;
font-size: 1.05rem;
}
.membership-includes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
margin-bottom: 2.5rem;
}
.membership-includes__item {
display: flex; align-items: center; gap: 0.65rem;
font-size: 0.9rem;
color: rgba(255,255,255,0.9);
font-weight: 500;
}
.check-icon {
width: 22px; height: 22px;
background: rgba(59,171,90,0.25);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--green);
font-size: 0.7rem;
flex-shrink: 0;
}
.membership-spotlight__pricing {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-xl);
padding: 2.5rem;
text-align: center;
backdrop-filter: blur(8px);
}
.price-tag {
margin-bottom: 1.5rem;
}
.price-tag__amount {
font-family: var(--font-heading);
font-size: 4rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
}
.price-tag__period {
font-size: 1rem;
color: rgba(255,255,255,0.6);
}
.price-tag__yearly {
font-size: 0.85rem;
color: rgba(255,255,255,0.5);
margin-top: 0.35rem;
}
.price-features { text-align: left; margin-bottom: 2rem; }
.price-feature {
display: flex; align-items: center; gap: 0.65rem;
padding: 0.6rem 0;
font-size: 0.875rem;
color: rgba(255,255,255,0.85);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.price-feature:last-child { border-bottom: none; }
/* ─── TESTIMONIALS ───────────────────────────────────────────── */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.testimonial-card {
background: var(--color-card);
border-radius: var(--radius-xl);
padding: 2rem;
box-shadow: var(--shadow);
border: 1px solid var(--gray-100);
transition: var(--transition);
position: relative;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-card__quote {
font-size: 2.5rem;
color: var(--primary-light);
line-height: 1;
margin-bottom: 0.5rem;
font-family: Georgia, serif;
}
.testimonial-card__text {
color: var(--gray-700);
font-size: 0.95rem;
line-height: 1.75;
margin-bottom: 1.5rem;
}
.testimonial-card__stars {
color: var(--gold);
font-size: 0.9rem;
margin-bottom: 1rem;
letter-spacing: 2px;
}
.testimonial-card__author {
display: flex; align-items: center; gap: 0.85rem;
}
.testimonial-card__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-light), var(--gold-light));
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.testimonial-card__name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--white);
}
.testimonial-card__role {
font-size: 0.8rem;
color: var(--gray-500);
}
/* ─── BLOG PREVIEW ───────────────────────────────────────────── */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.blog-card {
position: relative;
background: var(--color-card);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--gray-100);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
display: flex;
flex-direction: column;
}
.blog-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--cat-bg, var(--primary));
opacity: 0.85; z-index: 1;
}
.blog-card:hover {
transform: translateY(-8px);
background: var(--color-card-hover);
border-color: var(--cat-bg, var(--primary));
box-shadow: var(--shadow-lg);
}
.blog-card__img {
height: 200px;
background: var(--img-bg, linear-gradient(135deg, rgba(255,75,50,0.18), rgba(102,36,154,0.14)));
display: flex; align-items: center; justify-content: center;
font-size: 4rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.blog-card:hover .blog-card__img { transform: scale(1.04); }
.blog-card__category {
position: absolute;
top: 1rem; left: 1rem;
padding: 0.3rem 0.8rem;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--cat-bg, var(--primary));
color: var(--cat-color, var(--white));
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.blog-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card__meta {
display: flex; align-items: center; gap: 0.75rem;
font-size: 0.8rem;
color: var(--gray-400);
margin-bottom: 0.75rem;
}
.blog-card__title {
font-size: 1.1rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.65rem;
line-height: 1.4;
}
.blog-card__excerpt {
color: var(--gray-600);
font-size: 0.875rem;
line-height: 1.7;
flex: 1;
margin-bottom: 1.25rem;
}
.blog-card__link {
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 700;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: var(--transition);
align-self: flex-start;
}
.blog-card__link:hover { gap: 0.65rem; color: var(--gold); }
/* ─── LESSON CARDS ───────────────────────────────────────────── */
.lessons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.lesson-card {
background: var(--color-card);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--gray-100);
transition: var(--transition);
}
.lesson-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.lesson-card__img {
height: 180px;
display: flex; align-items: center; justify-content: center;
font-size: 4rem;
background: var(--img-bg, linear-gradient(135deg, var(--primary-light), var(--teal-light)));
position: relative;
}
.lesson-card__tag {
position: absolute;
top: 0.75rem; left: 0.75rem;
padding: 0.25rem 0.7rem;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lesson-card__body { padding: 1.25rem; }
.lesson-card__title {
font-size: 1rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.5rem;
}
.lesson-card__desc { font-size: 0.85rem; color: var(--gray-500); line-height: 1.65; margin-bottom: 1rem; }
.lesson-card__footer {
display: flex; align-items: center; justify-content: space-between;
}
.lesson-card__age {
font-size: 0.75rem;
color: var(--gray-400);
font-weight: 500;
}
/* ─── FILTER BAR ─────────────────────────────────────────────── */
.filter-bar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 3rem;
}
.filter-btn {
padding: 0.55rem 1.25rem;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 600;
background: var(--color-card);
color: var(--gray-600);
border: 2px solid var(--gray-200);
cursor: pointer;
transition: var(--transition);
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.active {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
/* ─── TABS ───────────────────────────────────────────────────── */
.tabs {
display: flex;
gap: 0.25rem;
border-bottom: 2px solid var(--gray-200);
margin-bottom: 2.5rem;
}
.tab-btn {
padding: 0.85rem 1.5rem;
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 600;
color: var(--gray-500);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: var(--transition);
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* ─── CTA BANNER ─────────────────────────────────────────────── */
.cta-banner {
background: linear-gradient(135deg, var(--gold), var(--coral));
border-radius: var(--radius-xl);
padding: 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.15), transparent);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); margin-bottom: 1rem; }
.cta-banner p { color: rgba(255,255,255,0.85); margin-bottom: 2rem; max-width: 550px; margin-left: auto; margin-right: auto; }
/* ─── PRICING CARDS ──────────────────────────────────────────── */
.pricing-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: start;
}
.pricing-card {
background: var(--color-card);
border-radius: var(--radius-xl);
padding: 2.5rem;
box-shadow: var(--shadow);
border: 2px solid var(--gray-200);
transition: var(--transition);
position: relative;
}
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card--featured {
border-color: var(--primary);
transform: scale(1.04);
box-shadow: var(--shadow-purple);
z-index: 1;
}
.pricing-card--featured:hover { transform: scale(1.04) translateY(-4px); }
.pricing-card__badge {
position: absolute;
top: -14px; left: 50%; transform: translateX(-50%);
background: linear-gradient(90deg, var(--primary), var(--primary-dark));
color: var(--white);
padding: 0.35rem 1.25rem;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
}
.pricing-card__name {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.5rem;
}
.pricing-card__price {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
margin-bottom: 0.25rem;
}
.pricing-card__price sub { font-size: 1.25rem; vertical-align: super; }
.pricing-card__period { font-size: 0.85rem; color: var(--gray-500); margin-bottom: 1.5rem; }
.pricing-card__divider { height: 1px; background: var(--gray-100); margin-bottom: 1.5rem; }
.pricing-card__features { margin-bottom: 2rem; }
.pricing-card__feature {
display: flex; align-items: flex-start; gap: 0.65rem;
padding: 0.5rem 0;
font-size: 0.9rem;
color: var(--gray-700);
}
.pricing-card__feature .tick { color: var(--green); flex-shrink: 0; font-weight: 700; }
.pricing-card__feature .cross { color: var(--gray-300); flex-shrink: 0; font-weight: 700; }
/* ─── CURRICULUM PACK CARDS ──────────────────────────────────── */
.pack-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.pack-card {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: var(--transition);
background: var(--color-card);
}
.pack-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pack-card__header {
height: 200px;
display: flex; align-items: center; justify-content: center;
position: relative;
font-size: 5rem;
}
.pack-card__badge {
position: absolute;
top: 1rem; right: 1rem;
padding: 0.35rem 0.85rem;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
background: rgba(255,255,255,0.9);
color: var(--navy);
}
.pack-card__body { padding: 2rem; }
.pack-card__weeks {
font-size: 0.8rem;
font-weight: 600;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.pack-card__title {
font-size: 1.5rem;
font-weight: 800;
color: var(--white);
margin-bottom: 0.75rem;
}
.pack-card__desc { font-size: 0.95rem; color: var(--gray-500); margin-bottom: 1.5rem; }
.pack-card__includes {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.pack-tag {
padding: 0.3rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
background: var(--primary-light);
color: var(--primary);
}
.pack-card__footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 1.25rem;
border-top: 1px solid var(--gray-100);
}
.pack-card__price {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 900;
color: var(--primary);
}
.pack-card__price span {
font-size: 0.85rem;
color: var(--gray-400);
font-weight: 400;
text-decoration: line-through;
}
/* ─── ACTIVITY CARDS ─────────────────────────────────────────── */
.activity-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.activity-card {
background: var(--color-card);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-100);
transition: var(--transition);
text-align: center;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.activity-card__emoji { font-size: 2.5rem; margin-bottom: 0.85rem; }
.activity-card__title {
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.4rem;
}
.activity-card__count { font-size: 0.8rem; color: var(--gray-500); }
/* ─── CONTACT FORM ───────────────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
align-items: start;
}
.contact-info__item {
display: flex; align-items: flex-start; gap: 1rem;
margin-bottom: 2rem;
}
.contact-info__icon {
width: 48px; height: 48px;
background: var(--primary-light);
border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.contact-info__label {
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary);
margin-bottom: 0.25rem;
}
.contact-info__value { color: var(--gray-700); font-size: 0.95rem; }
.form-group { margin-bottom: 1.25rem; }
.form-label {
display: block;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.5rem;
}
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 0.85rem 1.1rem;
border: 2px solid var(--gray-200);
border-radius: var(--radius);
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--white);
background: var(--color-card);
transition: var(--transition);
outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(123,94,167,0.1);
}
.form-textarea { resize: vertical; min-height: 140px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* ─── PAGE HERO (inner pages) ────────────────────────────────── */
/* ─── UNIFIED PAGE HERO ─────────────────────────────────────────
One tall, animated hero shared by every interior page. Matches the
homepage hero height and adds floating gradient orbs, a drifting
grid, twinkling sparkles and a fanned deck of floating cards. */
.page-hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 620px;
display: flex;
align-items: center;
padding: 150px 20px 120px;
text-align: center;
color: var(--white);
background: radial-gradient(circle at 18% 8%, #241b3a 0%, #16111f 44%, #0b0810 100%);
}
/* drifting grid + top glow */
.page-hero::before {
content: '';
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
animation: phGridDrift 24s linear infinite;
}
@keyframes phGridDrift { from { background-position: 0 0; } to { background-position: 46px 46px; } }
/* vignette above the fx, below the content */
.page-hero::after {
content: '';
position: absolute; inset: 0; z-index: 1; pointer-events: none;
/* Second layer forces the very bottom edge to a flat, viewport-width-
independent color (matching the wave-divider fill sections use right
below the hero) — the radial gradient underneath varies its edge
color by viewport width, so a flat wave-fill color only matched it
by accident at some widths and showed a seam at others. This layer
must be painted FIRST (multiple CSS backgrounds paint top-listed on
top) so its opaque flat band fully covers the vignette below it —
otherwise the vignette's radial falloff still shows through the
"flat" band, making it non-uniform and visibly different from the
wave SVG's single solid fill. */
background: linear-gradient(to bottom, transparent 82%, #101114 100%),
radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.5) 100%);
}
/* FX layer — floating orbs + sparkles (markup: .page-hero__fx) */
.page-hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ph-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.42; }
.ph-orb--a { width: 440px; height: 440px; top: -130px; left: -110px;
background: radial-gradient(circle at 30% 30%, #00BFC4 0%, transparent 70%);
animation: phFloatA 13s ease-in-out infinite; }
.ph-orb--b { width: 520px; height: 520px; top: 40px; right: -180px;
background: radial-gradient(circle at 30% 30%, #FFB000 0%, transparent 70%);
animation: phFloatB 16s ease-in-out infinite; }
.ph-orb--c { width: 400px; height: 400px; bottom: -170px; left: 34%;
background: radial-gradient(circle at 30% 30%, #66249A 0%, transparent 70%);
animation: phFloatC 18s ease-in-out infinite; }
@keyframes phFloatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,-42px) scale(1.08); } }
@keyframes phFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-32px,32px) scale(0.93); } }
@keyframes phFloatC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(22px,22px) scale(1.07); } }
.ph-spark { position: absolute; font-size: 1rem; opacity: 0;
animation: phTwinkle 3.2s ease-in-out infinite; }
@keyframes phTwinkle { 0%,100% { opacity: 0; transform: scale(.5) rotate(0deg); } 50% { opacity: .9; transform: scale(1.1) rotate(18deg); } }
.page-hero > .container { position: relative; z-index: 3; max-width: 900px; margin: 0 auto; }
/* Excludes .page-hero__fx — it needs position:absolute (set above) to stretch
full-bleed and host the floating orbs; this rule was clobbering that down
to position:relative (same specificity, later in source), collapsing the
fx layer to 0×0 and silently killing the colorful background on every
page that uses this shared hero (everything except the homepage). */
.page-hero > :not(.page-hero__fx) { position: relative; z-index: 3; }
.page-hero .page-hero__fx { z-index: 0; }
.page-hero .breadcrumb { justify-content: center; margin-bottom: 1.75rem;
animation: slideUpFade .7s ease-out both; }
.page-hero h1 { color: var(--white); margin-bottom: 1.25rem;
font-size: clamp(36px, 6vw, 60px); line-height: 1.12; letter-spacing: -0.5px;
text-shadow: 0 0 40px rgba(109,91,208,0.35), 0 0 80px rgba(255,75,50,0.16);
animation: slideUpFade .8s ease-out .12s both; }
.page-hero p { color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto;
font-size: 1.125rem; line-height: 1.65;
animation: slideUpFade .8s ease-out .26s both; }
/* fanned deck of floating cards (markup: .page-hero__deck) */
.page-hero__deck { display: flex; align-items: flex-end; justify-content: center;
margin-top: 3.5rem; animation: slideUpFade .9s ease-out .4s both; }
.ph-card { position: relative; width: 122px; height: 164px; border-radius: 18px;
margin-left: -26px; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: .5rem; border: 3px solid rgba(255,255,255,0.16);
box-shadow: 0 22px 44px rgba(0,0,0,0.4); overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
animation: phBob 5s ease-in-out infinite; }
.ph-card__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ph-card:first-child { margin-left: 0; }
.ph-card:hover { transform: translateY(-18px) scale(1.08) rotate(0deg) !important;
box-shadow: 0 30px 60px rgba(0,0,0,0.5); z-index: 20; }
.ph-card--1 { transform: rotate(-12deg); z-index: 1; animation-delay: 0s; }
.ph-card--2 { transform: rotate(-5deg) translateY(-12px); z-index: 2; animation-delay: .4s; }
.ph-card--3 { width: 138px; height: 186px; transform: translateY(-24px); z-index: 3; animation-delay: .8s; }
.ph-card--4 { transform: rotate(5deg) translateY(-12px); z-index: 2; animation-delay: 1.2s; }
.ph-card--5 { transform: rotate(12deg); z-index: 1; animation-delay: 1.6s; }
.ph-card__emoji { font-size: 2.2rem; }
.ph-card__label { color: #fff; font-size: .68rem; font-weight: 700; text-align: center;
padding: 0 .5rem; line-height: 1.3; }
@keyframes phBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (max-width: 760px) {
.page-hero { min-height: 0; padding: 118px 16px 88px; }
.page-hero__deck { margin-top: 2.5rem; }
.ph-card { width: 66px; height: 92px; margin-left: -16px; border-width: 2px; border-radius: 13px; }
.ph-card--3 { width: 76px; height: 104px; }
.ph-card__emoji { font-size: 1.25rem; }
.ph-card__label { font-size: .48rem; padding: 0 .25rem; }
}
@media (prefers-reduced-motion: reduce) {
.page-hero::before, .ph-orb, .ph-spark, .ph-card { animation: none; }
}
/* flanking-card hero variant — two overlapping cards on either side of
centered heading text (markup: .hero-flank-row inside .page-hero--flanked) */
.page-hero--flanked > .container { max-width: 1440px; }
.page-hero--flanked { padding-bottom: 80px; }
.hero-flank-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.hero-flank-text { max-width: 620px; }
.hero-flank-side { position: relative; width: 360px; height: 380px; flex-shrink: 0; }
.hero-flank-img {
position: absolute; width: 250px; height: 330px; object-fit: cover; border-radius: 22px;
border: 3px solid rgba(255,255,255,0.16);
box-shadow: 0 22px 44px rgba(0,0,0,0.4);
animation: phBob 5s ease-in-out infinite;
}
.hero-flank-side--left .hero-flank-img--back { left: -70px; top: 50px; transform: rotate(-18deg); z-index: 1; animation-delay: .3s; }
.hero-flank-side--left .hero-flank-img--front { left: 90px; top: -10px; transform: rotate(-5deg); z-index: 2; }
.hero-flank-side--right .hero-flank-img--front { right: 90px; top: -10px; transform: rotate(5deg); z-index: 2; }
.hero-flank-side--right .hero-flank-img--back { right: -70px; top: 50px; transform: rotate(18deg); z-index: 1; animation-delay: .3s; }
@media (max-width: 1250px) {
.hero-flank-side { display: none; }
}
@media (max-width: 760px) {
.page-hero--flanked { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-flank-img { animation: none; }
}
/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer {
background: #17191C;
color: var(--gray-500);
padding: 5rem 0 0;
border-top: 1px solid var(--gray-200);
}
.footer__top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand { }
.footer__logo {
display: flex; align-items: center; gap: 0.65rem;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.1rem;
color: var(--white);
margin-bottom: 1rem;
}
.footer__desc { font-size: 0.9rem; line-height: 1.75; margin-bottom: 1.5rem; }
.footer__social {
display: flex; gap: 0.65rem;
}
.footer__social-link {
width: 38px; height: 38px;
border-radius: var(--radius);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.footer__social-link:nth-child(1):hover { background: var(--teal); border-color: var(--teal); transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 18px rgba(0,191,196,0.4); }
.footer__social-link:nth-child(2):hover { background: var(--coral); border-color: var(--coral); transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 18px rgba(255,75,50,0.4); }
.footer__social-link:nth-child(3):hover { background: var(--gold); border-color: var(--gold); transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 18px rgba(255,176,0,0.4); }
.footer__social-link:nth-child(4):hover { background: var(--purple); border-color: var(--purple); transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 18px rgba(102,36,154,0.4); }
.footer__col-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.875rem;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1.25rem;
}
.footer__links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__link {
font-size: 0.875rem;
color: var(--gray-500);
transition: var(--transition);
}
.footer__link:hover { color: var(--primary); padding-left: 4px; }
.footer__newsletter { }
.footer__newsletter-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.875rem;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.footer__newsletter p { font-size: 0.85rem; margin-bottom: 1rem; }
/* Shared email opt-in (free-lessons / waitlist) — handled by gk-forms.js.
The input is a solid white field so it's clearly visible on BOTH dark
CTA sections and light cream/pink boxes (.mailerlite-box, .cta-box). */
.gk-optin-form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gk-optin-form__email {
flex: 1 1 220px; min-width: 0;
padding: 0.85rem 1rem; border-radius: 10px;
border: 1px solid rgba(0,0,0,0.2);
background: #fff; color: #1a1a1a; font-size: 0.95rem;
font-family: inherit;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.gk-optin-form__email::placeholder { color: rgba(0,0,0,0.42); }
.gk-optin-form__email:focus {
outline: none; border-color: var(--primary, #FF4B32);
box-shadow: 0 0 0 3px rgba(255,75,50,0.2);
}
.gk-optin-form__btn {
flex: 0 0 auto;
padding: 0.85rem 1.4rem; border-radius: 10px; border: none;
background: var(--primary, #FF4B32); color: #fff; font-weight: 700; font-size: 0.95rem;
cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gk-optin-form__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,75,50,0.4); }
.gk-optin-form__btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
@media (max-width: 520px) {
.gk-optin-form__email, .gk-optin-form__btn { flex: 1 1 100%; }
}
.newsletter-form {
display: flex; gap: 0.5rem;
}
.newsletter-form input {
flex: 1;
padding: 0.7rem 1rem;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius);
color: var(--white);
font-family: var(--font-body);
font-size: 0.875rem;
outline: none;
transition: var(--transition);
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form input:focus { border-color: var(--primary); background: rgba(255,255,255,0.12); }
.newsletter-form button {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--white);
padding: 0.7rem 1.1rem;
border-radius: var(--radius);
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
box-shadow: 0 6px 16px rgba(255,75,50,0.3);
}
.newsletter-form button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255,75,50,0.45); }
.footer__bottom {
padding: 1.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
color: var(--gray-500);
}
.footer__bottom a { color: var(--gray-500); transition: var(--transition); }
.footer__bottom a:hover { color: var(--primary); }
/* ─── FOOTER (grid/col variant used on shop.html etc.) ────────── */
.footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__logo-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 8px; margin-right: 0.4rem;
background: linear-gradient(135deg, var(--primary), var(--purple));
font-size: 0.85rem; color: var(--white);
}
.footer__logo-img {
width: 32px; height: 32px;
object-fit: contain; flex-shrink: 0; vertical-align: middle;
}
.footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__heading {
font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem;
color: var(--white); text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 0.65rem;
}
.footer__bottom p { margin: 0; }
/* ─── SCROLL ANIMATIONS ──────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal--left { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }
.reveal--left.revealed, .reveal--right.revealed { transform: translateX(0); }
.reveal--scale { transform: scale(0.92); }
.reveal--scale.revealed { transform: scale(1); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
/* ─── UTILITIES ──────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-white { color: var(--white); }
.text-primary { color: var(--primary); }
.text-gold { color: var(--gold-dark); }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 0.5rem; }
/* ─── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.85rem;
color: rgba(255,255,255,0.6);
margin-bottom: 1rem;
justify-content: center;
}
.breadcrumb a { color: rgba(255,255,255,0.6); transition: var(--transition); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: rgba(255,255,255,0.4); }
/* ─── FAQ ────────────────────────────────────────────────────── */
.faq-item {
border-bottom: 1px solid var(--gray-200);
overflow: hidden;
}
.faq-question {
display: flex; align-items: center; justify-content: space-between;
padding: 1.5rem 0;
cursor: pointer;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--white);
gap: 1rem;
}
.faq-icon {
width: 28px; height: 28px;
background: var(--primary-light);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--primary);
font-size: 1.1rem;
flex-shrink: 0;
transition: var(--transition);
}
.faq-item.open .faq-icon { background: var(--primary); color: var(--white); transform: rotate(45deg); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.faq-answer p {
padding-bottom: 1.25rem;
color: var(--gray-600);
font-size: 0.95rem;
line-height: 1.75;
}
/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.lessons-grid { grid-template-columns: repeat(2, 1fr); }
.pricing-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.pricing-card--featured { transform: none; }
.pricing-card--featured:hover { transform: translateY(-4px); }
.footer__top { grid-template-columns: 1fr 1fr; }
.stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
.pack-grid { grid-template-columns: 1fr; }
.activity-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1220px) {
.nav__links, .nav__actions { display: none; }
.nav__hamburger { display: flex; }
}
@media (max-width: 768px) {
.hero__inner { grid-template-columns: 1fr; text-align: center; }
.hero__visual { display: none; }
.hero__subtitle { margin-left: auto; margin-right: auto; }
.hero__cta { justify-content: center; }
.hero__social-proof { justify-content: center; }
.hero__inner--clean { text-align: left; }
.hero__title--clean { font-size: 32px; }
.hero__subtitle--clean { font-size: 16px; margin-left: 0; margin-right: 0; }
.hero__cta--clean { justify-content: flex-start; }
.hero__social-proof--clean { justify-content: flex-start; }
.membership-spotlight__inner { grid-template-columns: 1fr; }
.membership-includes { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.features-grid { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.blog-grid { grid-template-columns: 1fr; }
.lessons-grid { grid-template-columns: 1fr; }
.footer__top { grid-template-columns: 1fr; gap: 2rem; }
.stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.activity-grid { grid-template-columns: repeat(2, 1fr); }
.cta-banner { padding: 2.5rem 1.5rem; }
.membership-spotlight { padding: 2.5rem 1.5rem; }
.footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
section { padding: 3.5rem 0; }
.form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.stats-bar__inner { grid-template-columns: 1fr; }
.hero__title { font-size: 2.4rem; }
.hero__cta { flex-direction: column; align-items: center; }
.activity-grid { grid-template-columns: 1fr; }
.filter-bar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
}
/* ─── TAG COLORS ─────────────────────────────────────────────── */
.tag--ot { background: var(--gold-light); color: var(--gold-dark); }
.tag--nt { background: var(--purple-light); color: var(--purple-dark); }
.tag--jesus { background: var(--coral-light); color: var(--coral-dark); }
.tag--heroes { background: var(--green-light); color: var(--green-dark); }
.tag--holiday { background: var(--primary-light); color: var(--primary-dark); }
.tag--prayer { background: var(--gray-50); color: var(--gray-700); }
/* ─── MINISTRY LOGO MARK ─────────────────────────────────────── */
.logo-mark {
background: var(--gold);
border-radius: 10px;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
}
/* ─── ANIMATED GRADIENT TEXT ─────────────────────────────────── */
.gradient-text {
background: linear-gradient(90deg, var(--primary), var(--gold), var(--coral), var(--primary));
background-size: 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 5s ease-in-out infinite;
}
@keyframes gradientShift {
0%,100% { background-position: 0%; }
50% { background-position: 100%; }
}
/* ─── SECTION DIVIDER ────────────────────────────────────────── */
.wave-divider {
overflow: hidden;
line-height: 0;
}
.wave-divider svg { display: block; width: 100%; }
/* ─── LOADING OVERLAY ────────────────────────────────────────── */
#page-loader {
position: fixed; inset: 0;
background: var(--primary-darker);
z-index: 9998;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-content {
text-align: center;
color: var(--white);
}
.loader-logo { font-family: var(--font-heading); font-size: 2rem; font-weight: 900; }
.loader-bar {
width: 200px; height: 3px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
margin: 1rem auto 0;
overflow: hidden;
}
.loader-bar::after {
content: '';
display: block;
height: 100%;
width: 40%;
background: var(--gold);
border-radius: 2px;
animation: loadBar 1s ease-in-out infinite alternate;
}
@keyframes loadBar {
from { transform: translateX(-100%); }
to { transform: translateX(350%); }
}
/* ============================================================
NEW HERO + LESSON CARD CAROUSEL (minimal hero redesign)
============================================================ */
/* ─── HERO SECTION ───────────────────────────────────────────── */
.hero-new {
background: #17191C;
color: white;
padding: 140px 20px 28px;
min-height: 560px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
/* Legacy decorative layers — retired in favour of the solid navy background */
.hero-orbs,
.hero-blur-effect { display: none; }
.hero-new .container {
max-width: 860px;
margin: 0 auto;
position: relative;
z-index: 10;
}
.hero-content {
text-align: center;
}
/* Hero Badge - brand teal frame + gold text */
.hero-badge {
display: inline-block;
background: rgba(0,191,196, 0.12);
border: 1px solid rgba(0,191,196, 0.45);
color: var(--glory-gold);
padding: 14px 26px;
border-radius: 50px;
font-weight: 600;
font-size: 14.5px;
margin-bottom: 28px;
animation: fadeInDown 0.8s ease-out;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0,191,196, 0.12);
letter-spacing: 0.5px;
transition: all 300ms ease;
}
.hero-badge:hover {
background: rgba(0,191,196, 0.2);
border-color: rgba(0,191,196, 0.65);
transform: translateY(-2px);
}
/* H1 - large, bold, clean */
.hero-title {
font-size: clamp(34px, 4.4vw, 58px);
font-weight: 800;
line-height: 1.14;
margin-bottom: 22px;
color: var(--glory-cream);
animation: slideUpFade 0.8s ease-out 0.2s both;
letter-spacing: -0.5px;
}
/* Word-level accent — brand gold */
.hero-title .text-gold {
color: var(--glory-gold);
}
/* Subheading - light gray, animated */
.hero-subtitle {
font-size: 18px;
line-height: 1.65;
color: #cbd5e1;
max-width: 620px;
margin: 0 auto 34px;
animation: slideUpFade 0.8s ease-out 0.4s both;
}
/* CTAs container */
.hero-ctas {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 32px;
flex-wrap: wrap;
animation: slideUpFade 0.8s ease-out 0.6s both;
}
/* Primary CTA - brand coral, shadow, hover lift */
.cta-primary {
background: var(--glory-coral);
color: var(--glory-cream);
padding: 16px 32px;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease;
box-shadow: 0 12px 28px rgba(255, 75, 50, 0.38);
border: none;
cursor: pointer;
}
.cta-primary:hover {
transform: translateY(-3px);
background: #FF6249;
box-shadow: 0 18px 44px rgba(255, 75, 50, 0.5);
}
/* Secondary CTA - brand teal outline, glow on hover */
.cta-secondary {
border: 2px solid var(--glory-teal);
color: var(--glory-cream);
padding: 14px 30px;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease, border-color 250ms ease;
cursor: pointer;
}
.cta-secondary:hover {
background: rgba(0, 191, 196, 0.14);
border-color: #33CDD1;
transform: translateY(-3px);
box-shadow: 0 0 30px rgba(0, 191, 196, 0.5);
}
/* Social proof */
.hero-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
font-size: 14px;
color: #cbd5e1;
flex-wrap: wrap;
max-width: 640px;
margin: 0 auto;
text-align: center;
animation: fadeIn 0.8s ease-out 0.8s both;
}
.hero-proof .hero-proof-stars {
font-size: 16px;
letter-spacing: 2px;
}
.hero-proof .proof-text {
line-height: 1.4;
}
.hero-proof .proof-text strong {
color: #ffffff;
font-weight: 700;
}
.hero-proof .divider {
color: #4b5563;
}
/* ─── HERO RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1023px) {
.hero-new { padding: 128px 20px 84px; min-height: 0; }
.hero-content { text-align: center; }
.hero-subtitle,
.hero-proof { margin-left: auto; margin-right: auto; }
.hero-ctas,
.hero-proof { justify-content: center; }
}
/* ─── SOCIAL PROOF NOTIFICATION (bottom-left toast, rolls through
testimonials, fixed to the viewport so it stays put while scrolling
instead of being pinned inside the hero section) ────── */
.hero-notification {
position: fixed;
bottom: 24px;
left: 24px;
right: auto;
background: rgba(20, 15, 36, 0.94);
border: 1px solid rgba(0,155,160, 0.35);
border-radius: 14px;
padding: 16px 20px;
max-width: 296px;
backdrop-filter: blur(10px);
box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.6), 0 0 40px -12px rgba(0,155,160, 0.35);
z-index: 100;
opacity: 0;
pointer-events: none;
display: none;
}
@media (min-width: 1024px) {
.hero-notification { display: block; }
}
/* JS toggles these to fade the toast in/out between testimonials. */
.hero-notification.is-visible {
opacity: 1;
pointer-events: auto;
animation: slideInLeft 0.6s ease-out both;
}
.hero-notification.is-hidden {
opacity: 0;
animation: fadeOutLeft 0.5s ease-in forwards;
}
.notification-content { text-align: left; }
.notification-stars {
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 8px;
}
.notification-quote {
font-size: 13px;
color: #e5e7eb;
line-height: 1.4;
margin: 0 0 8px 0;
font-style: italic;
}
.notification-author {
font-size: 12px;
color: #009BA0;
margin: 0;
font-weight: 600;
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutLeft {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(20px); }
}
@media (max-width: 768px) {
.hero-new {
padding: 104px 18px 64px;
min-height: auto;
}
.hero-badge {
font-size: 13px;
padding: 11px 20px;
line-height: 1.35;
margin-bottom: 22px;
}
.hero-title { font-size: 32px; }
.hero-subtitle { font-size: 16px; }
.hero-ctas { gap: 12px; }
.cta-primary, .cta-secondary { width: 100%; justify-content: center; }
.hero-proof { font-size: 12px; gap: 12px; }
.hero-notification { display: none !important; }
}
@media (max-width: 480px) {
.hero-title { font-size: 24px; }
.hero-subtitle { font-size: 14px; }
.cta-primary, .cta-secondary { padding: 12px 24px; font-size: 14px; }
}
/* ─── LESSON MARQUEE — two rows of framed lesson covers ──────────────────
Decorative only (not clickable). The top row drifts slowly left, the
bottom row drifts slowly right. Each row's .lm-group is duplicated in
the DOM so the translate loop is seamless. */
.lessons-carousel-section {
position: relative;
z-index: 1;
padding: 44px 0 52px;
overflow: hidden;
background: #17191C;
}
/* hero → marquee → "Real Problem" all read as ONE charcoal block:
same colour, no divider line. */
.lessons-carousel-section + .gk-section {
background: #17191C;
border-top: 0 !important;
position: relative;
z-index: 1;
padding-top: 60px;
}
.lm-inner {
--lm-card: clamp(240px, 27vw, 380px);
--lm-gap: 24px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--lm-gap);
/* soft fade at both edges so cards slide in/out of view */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.lm-row { overflow: hidden; }
.lm-track {
display: flex;
width: max-content;
will-change: transform;
}
.lm-track--left { animation: lm-scroll-left 70s linear infinite; }
.lm-track--right { animation: lm-scroll-right 70s linear infinite; }
.lm-group {
display: flex;
flex: none;
gap: var(--lm-gap);
padding-right: var(--lm-gap); /* keeps spacing even across the clone seam */
}
@keyframes lm-scroll-left {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes lm-scroll-right {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
.lm-card {
flex: none;
width: var(--lm-card);
aspect-ratio: 3 / 2;
margin: 0;
background: #fff;
padding: 10px;
border-radius: 14px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.35),
0 24px 46px -18px rgba(0, 0, 0, 0.6);
position: relative;
box-sizing: border-box;
}
.lm-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 7px;
display: block;
background: #17191C;
}
.lm-card__tag {
position: absolute;
bottom: 18px;
left: 18px;
margin: 0;
background: var(--glory-coral);
color: #FFF9ED;
font-family: var(--font-heading);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 999px;
box-shadow: 0 8px 18px rgba(255, 75, 50, 0.4);
}
@media (prefers-reduced-motion: reduce) {
.lm-track--left,
.lm-track--right { animation: none; }
}
@media (max-width: 900px) {
.lessons-carousel-section { padding: 34px 0 40px; }
.lessons-carousel-section + .gk-section { padding-top: 48px; }
.lm-inner { --lm-card: clamp(210px, 44vw, 320px); --lm-gap: 18px; }
}
@media (max-width: 560px) {
.lm-inner { --lm-card: 66vw; --lm-gap: 14px; }
.lm-card__tag { bottom: 12px; left: 12px; font-size: 10px; padding: 4px 9px; }
}
/* ─── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUpFade {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes cardSlideUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.hero-badge, .hero-title, .hero-subtitle, .hero-ctas, .hero-proof {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================
MEMBERSHIP BENEFITS + PRICING — premium ambient redesign
============================================================ */
/* ─── FLOWING JOURNEY SECTION (organic, editorial membership design) ─ */
.flowing-journey {
position: relative;
background: linear-gradient(135deg, #1c1e22 0%, #101114 100%);
color: white;
padding: 100px 20px;
overflow: hidden;
}
.journey-orbs {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 1;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
}
.orb-teal-lg {
width: 500px;
height: 500px;
top: -150px;
left: -150px;
background: radial-gradient(circle at 30% 30%, #009BA0 0%, #00BFC4 30%, transparent 70%);
opacity: 0.1;
animation: floatOrb 12s ease-in-out infinite;
}
.orb-orange-lg {
width: 600px;
height: 600px;
bottom: 50%;
right: -200px;
background: radial-gradient(circle at 30% 30%, #FF4B32 0%, #FF6B54 30%, transparent 70%);
opacity: 0.08;
animation: floatOrb 14s ease-in-out infinite;
animation-delay: 2s;
}
@keyframes floatOrb {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -30px) scale(1.05); }
}
/* Intro */
.journey-intro {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 10;
}
.journey-title {
font-size: 48px;
font-weight: 800;
margin-bottom: 16px;
text-shadow: 0 0 40px rgba(0,155,160, 0.2);
animation: fadeInDown 0.8s ease-out;
line-height: 1.2;
}
.journey-subtitle {
font-size: 18px;
color: #d1d5db;
max-width: 700px;
margin: 0 auto;
animation: fadeInDown 0.8s ease-out 0.2s both;
}
/* Flowing waves */
.flow-wave {
position: relative;
z-index: 10;
margin-bottom: 40px;
opacity: 0;
animation: fadeUpFlow 0.8s ease-out forwards;
}
.flow-wave-1 { animation-delay: 0.2s; }
.flow-wave-2 { animation-delay: 0.3s; margin-top: -20px; }
.flow-wave-3 { animation-delay: 0.4s; margin-top: -20px; }
.flow-wave-hero { animation-delay: 0.5s; margin-top: 60px; margin-bottom: 60px; }
.flow-wave-5 { animation-delay: 0.6s; margin-top: -20px; }
.flow-wave-final { animation-delay: 0.7s; margin-top: 80px; }
.flow-wave-value { animation-delay: 0.8s; margin-top: 60px; }
.wave-content { padding: 40px 20px; }
.wave-content-hero { padding: 60px 20px; }
.wave-title {
font-size: 14px;
font-weight: 700;
color: #009BA0;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 40px;
text-align: center;
opacity: 0.8;
}
.wave-title-final {
font-size: 28px;
color: #ffffff;
text-transform: none;
letter-spacing: normal;
margin-bottom: 50px;
opacity: 1;
}
/* Flow items row */
.flow-items-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.flow-items-row-center { max-width: 800px; }
/* Flow cards (individual component cards) */
.flow-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 30px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(0,155,160, 0.1);
border-radius: 20px;
transition: background 400ms ease, border-color 400ms ease, transform 400ms ease, box-shadow 400ms ease;
cursor: pointer;
backdrop-filter: blur(10px);
opacity: 0;
animation: slideUpFlow 0.6s ease-out forwards;
}
.flow-card-1 { animation-delay: 0.3s; }
.flow-card-2 { animation-delay: 0.35s; }
.flow-card-3 { animation-delay: 0.4s; }
.flow-card-4 { animation-delay: 0.45s; }
.flow-card-5 { animation-delay: 0.4s; }
.flow-card-6 { animation-delay: 0.45s; }
.flow-card-7 { animation-delay: 0.5s; }
.flow-card-8 { animation-delay: 0.55s; }
.flow-card-9 { animation-delay: 0.5s; }
.flow-card-10 { animation-delay: 0.55s; }
.flow-card-11 { animation-delay: 0.6s; }
.flow-card-12 { animation-delay: 0.65s; }
.flow-card-13 { animation-delay: 0.7s; }
.flow-card-14 { animation-delay: 0.75s; }
.flow-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: #009BA0;
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0,155,160, 0.2);
}
.flow-card-icon {
font-size: 56px;
transition: transform 300ms ease, filter 300ms ease;
filter: drop-shadow(0 0 10px rgba(0,155,160, 0.3));
}
.flow-card:hover .flow-card-icon {
filter: drop-shadow(0 0 20px rgba(0,155,160, 0.6));
transform: scale(1.2) rotate(5deg);
}
.flow-card h4 {
font-size: 15px;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.4;
}
/* Hero card (Monthly Live Q&A) */
.flow-card-hero {
padding: 50px 40px;
background: radial-gradient(circle at 35% 35%, rgba(0,155,160, 0.2) 0%, rgba(0,155,160, 0.05) 100%);
border: 2px solid #009BA0;
border-radius: 24px;
max-width: 500px;
margin: 0 auto;
box-shadow:
0 0 40px rgba(0,155,160, 0.3),
inset 0 0 40px rgba(0,155,160, 0.1);
animation: heroGlow 3s ease-in-out infinite;
transition: transform 300ms ease, box-shadow 300ms ease;
}
.flow-card-hero:hover {
box-shadow:
0 0 60px rgba(0,155,160, 0.5),
inset 0 0 60px rgba(0,155,160, 0.2);
transform: scale(1.05);
}
@keyframes heroGlow {
0%, 100% { box-shadow: 0 0 40px rgba(0,155,160, 0.3), inset 0 0 40px rgba(0,155,160, 0.1); }
50% { box-shadow: 0 0 60px rgba(0,155,160, 0.5), inset 0 0 60px rgba(0,155,160, 0.2); }
}
.flow-card-icon-hero { font-size: 72px; }
.flow-card-title-hero {
font-size: 28px;
font-weight: 800;
color: #ffffff;
margin: 20px 0 12px 0;
line-height: 1.3;
}
.flow-card-desc-hero {
font-size: 16px;
color: #FFF9ED;
margin: 0;
line-height: 1.6;
}
/* Flow features grid (Plus Your Membership) */
.flow-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.flow-feature {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(0,155,160, 0.15);
border-radius: 16px;
padding: 32px;
transition: background 300ms ease, border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
backdrop-filter: blur(10px);
text-align: center;
opacity: 0;
animation: slideUpFlow 0.6s ease-out forwards;
}
.flow-feature-1 { animation-delay: 0.8s; }
.flow-feature-2 { animation-delay: 0.85s; }
.flow-feature-3 { animation-delay: 0.9s; }
.flow-feature-4 { animation-delay: 0.95s; }
.flow-feature-5 { animation-delay: 1s; }
.flow-feature-6 { animation-delay: 1.05s; }
.flow-feature:hover {
background: rgba(255, 255, 255, 0.06);
border-color: #009BA0;
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0,155,160, 0.2);
}
.feature-icon {
font-size: 48px;
margin-bottom: 16px;
transition: transform 300ms ease, filter 300ms ease;
display: inline-block;
filter: drop-shadow(0 0 10px rgba(0,155,160, 0.2));
}
.flow-feature:hover .feature-icon {
filter: drop-shadow(0 0 20px rgba(0,155,160, 0.6));
transform: scale(1.2) rotate(-5deg);
}
.flow-feature h4 {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 12px 0 12px 0;
}
.flow-feature p {
font-size: 14px;
color: #d1d5db;
line-height: 1.6;
margin: 0;
}
/* Value math */
.value-flow-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 30px;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.value-flow-stat { text-align: center; }
.value-flow-number {
font-size: 56px;
font-weight: 800;
color: #FF4B32;
text-shadow: 0 0 30px rgba(255,75,50, 0.3);
margin-bottom: 8px;
}
.value-flow-stat p {
font-size: 14px;
color: #d1d5db;
margin: 0;
line-height: 1.4;
}
.value-flow-summary {
background: linear-gradient(135deg, rgba(0,155,160, 0.1) 0%, rgba(255,75,50, 0.05) 100%);
border: 1px solid rgba(0,155,160, 0.2);
border-radius: 16px;
padding: 30px;
text-align: center;
backdrop-filter: blur(10px);
max-width: 500px;
margin: 0 auto;
}
.value-flow-header { font-size: 16px; color: #d1d5db; margin-bottom: 12px; }
.value-flow-header strong { color: #009BA0; font-size: 22px; }
.value-flow-price { font-size: 16px; color: #d1d5db; margin-bottom: 12px; }
.value-flow-price strong { color: #FF4B32; font-size: 22px; }
.value-flow-calc { font-size: 18px; color: #ffffff; font-weight: 700; margin: 0; }
/* Animations */
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpFlow {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUpFlow {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 768px) {
.journey-title { font-size: 32px; }
.journey-subtitle { font-size: 16px; }
.flow-items-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.flow-card { padding: 24px 16px; gap: 12px; }
.flow-card-icon { font-size: 40px; }
.flow-card h4 { font-size: 13px; }
.flow-card-hero { padding: 40px 30px; }
.flow-card-title-hero { font-size: 22px; }
.flow-features-grid { grid-template-columns: 1fr; gap: 24px; }
.wave-title { font-size: 12px; margin-bottom: 30px; }
.value-flow-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.value-flow-number { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.journey-title, .journey-subtitle, .flow-wave, .flow-card,
.flow-card-hero, .flow-feature, .orb-teal-lg, .orb-orange-lg {
animation: none !important;
opacity: 1 !important;
}
}
/* ─── PRICING SECTION ────────────────────────────────────────── */
.pricing-premium {
position: relative;
background: #FFF9ED;
padding: 100px 20px;
/* overflow stays visible so the wave ::before can bleed up over the
section above with no sub-pixel seam; the orbs are clipped by .pricing-orbs
instead (see below). Overlap is a few px (not 1px) because the two
sections' fractional layout positions don't always land on the same
device pixel — a 1px overlap could round away to a visible hairline. */
overflow: visible;
margin-top: -4px;
}
/* Wave seam — the dark ".gkc" journey section above spills down into this
cream pricing section in a soft wave. This is a real filled