/* ============================================================ Learner Trail — Premium EdTech Stylesheet ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800&display=swap'); /* ── Variables ─────────────────────────────────────────── */ :root { --primary: #0A1F2E; --primary-mid: #16314A; --primary-deep: #051320; --blue: #1D4ED8; --blue-light: #EFF6FF; --green: #047857; --green-mid: #10B981; --green-deep: #065F46; --green-light: #D1FAE5; --gold: #047857; --gold-mid: #10B981; --gold-light: #D1FAE5; --bg: #F8FAFC; --surface: #FFFFFF; --border: #E2E8F0; --text: #0F172A; --text-mid: #475569; --text-muted: #94A3B8; --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04); --shadow-md: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04); --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04); --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.20); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; --ease: cubic-bezier(.4, 0, .2, 1); --transition: all .28s var(--ease); } /* ── Brand logo (Learner Trail) ─────────────────────────── */ .lt-logo { transition: transform .35s var(--ease); will-change: transform; } .lt-logo .lt-logo-sun { transform-box: fill-box; transform-origin: center; animation: ltSunPulse 3.2s ease-in-out infinite; } .lt-logo .lt-logo-trail { animation: ltTrailMove 4.5s linear infinite; } .navbar-brand:hover .lt-logo, a:hover > .lt-logo { transform: scale(1.05) rotate(-2deg); } .navbar-brand:hover .lt-logo .lt-logo-sun { animation-duration: 1.4s; } .navbar-brand:hover .lt-logo .lt-logo-trail { animation-duration: 1.6s; } @keyframes ltSunPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.85; } } @keyframes ltTrailMove { to { stroke-dashoffset: -7.2; } } @media (prefers-reduced-motion: reduce) { .lt-logo .lt-logo-sun, .lt-logo .lt-logo-trail { animation: none; } } /* ── Base ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; font-size: 15px; -webkit-font-smoothing: antialiased; /* Guard against horizontal scroll on mobile. Use `clip` (not `hidden`): `hidden` would force overflow-y to `auto`, turning into a scroll container and breaking `position: sticky` (e.g. the worksheets sidebar). `clip` does not. */ overflow-x: clip; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1.25; } a { text-decoration: none; color: inherit; transition: var(--transition); } img { max-width: 100%; display: block; } /* ── Utility ────────────────────────────────────────────── */ .section-pad { padding: 40px 0; } .section-pad-lg{ padding: 60px 0; } /* Tighten the header row margin inside sections */ .section-pad .mb-5 { margin-bottom: 1.5rem !important; } .text-green { color: var(--green) !important; } .text-gold { color: var(--gold) !important; } .text-blue { color: var(--blue) !important; } .badge-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 50px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .badge-beginner { background: var(--green-light); color: var(--green-deep); } .badge-intermediate{ background: #DBEAFE; color: #1D4ED8; } .badge-advanced { background: #FEE2E2; color: #991B1B; } /* ── Scrollbar ──────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: #94A3B8; } /* ════════════════════════════════════════════════════════ NAVBAR ════════════════════════════════════════════════════════ */ .ss-nav { background: rgba(13, 33, 55, .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.06); position: sticky; top: 0; z-index: 9999; transition: var(--transition); } .ss-nav.scrolled { background: rgba(13, 33, 55, .99); box-shadow: 0 4px 24px rgba(0,0,0,.3); } .ss-nav .navbar-brand { display: flex; align-items: center; gap: 10px; } .ss-nav .brand-text { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.25rem; color: #ffffff; letter-spacing: -.01em; } .ss-nav .nav-link { color: rgba(255,255,255,.75) !important; font-weight: 500; font-size: 14px; padding: 22px 16px !important; position: relative; letter-spacing: .01em; } .ss-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--green-mid); border-radius: 99px; transition: width .25s var(--ease); } .ss-nav .nav-link:hover, .ss-nav .nav-link.active { color: #fff !important; } .ss-nav .nav-link:hover::after, .ss-nav .nav-link.active::after { width: 70%; } .btn-nav-cta { background: var(--green); color: #fff !important; border-radius: 50px; padding: 9px 22px !important; font-weight: 600; font-size: 13.5px; border: none; margin-left: 8px; box-shadow: 0 4px 14px rgba(5,150,105,.4); } .btn-nav-cta::after { display: none !important; } .btn-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5,150,105,.5); background: var(--green-deep); } .navbar-toggler { border: 1px solid rgba(255,255,255,.2) !important; border-radius: 8px !important; padding: 6px 10px !important; } .navbar-toggler-icon { filter: invert(1); } /* ════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════ */ .btn-ss-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff; font-weight: 700; font-size: 14px; border: none; padding: 10px 22px; border-radius: 50px; box-shadow: 0 4px 20px rgba(5,150,105,.35); transition: var(--transition); letter-spacing: .01em; cursor: pointer; } .btn-ss-primary:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 8px 28px rgba(5,150,105,.5); background: var(--green-deep); } .btn-ss-secondary { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); color: #fff; font-weight: 600; font-size: 15px; border: 1.5px solid rgba(255,255,255,.25); padding: 13px 28px; border-radius: 50px; transition: var(--transition); cursor: pointer; } .btn-ss-secondary:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.5); transform: translateY(-2px); } .btn-ss-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--blue); font-weight: 600; font-size: 14.5px; border: 1.5px solid var(--blue); padding: 11px 24px; border-radius: 50px; transition: var(--transition); cursor: pointer; } .btn-ss-outline:hover { background: var(--blue); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.3); } /* ════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════ */ .hero { background: var(--primary); min-height: auto; display: flex; align-items: center; position: relative; overflow: hidden; padding: 48px 0; } .hero-orb { display: none; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3); border-radius: 50px; padding: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--green-mid); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 24px; } .hero-headline { font-size: clamp(1.85rem, 3.6vw, 2.7rem); font-weight: 800; color: #fff; line-height: 1.16; letter-spacing: -.025em; margin-bottom: 16px; } .hero-headline span { color: var(--green-mid); } .hero-sub { font-size: 1rem; color: rgba(255,255,255,.72); max-width: 480px; margin-bottom: 24px; font-weight: 400; line-height: 1.6; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero-grades-badge { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; color: rgba(255,255,255,.5); font-size: 12.5px; font-weight: 500; } .hero-grades-badge .grade-pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 50px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); } @keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Hero carousel */ .hero-carousel { width: 100%; max-width: 320px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 0; backdrop-filter: blur(20px); box-shadow: 0 32px 64px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1); animation: cardFloat 6s ease-in-out infinite; overflow: hidden; } .hero-slide { padding: 20px 20px 38px; min-height: 262px; display: flex; flex-direction: column; gap: 9px; border-radius: var(--radius-lg); } .hero-slide-green { background: rgba(5,150,105,.14); } .hero-slide-blue { background: rgba(37,99,235,.14); } .hero-slide-gold { background: rgba(16,185,129,.14); } .hero-slide-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 50px; padding: 5px 12px; font-size: 11px; font-weight: 700; color: #fff; align-self: flex-start; letter-spacing: .02em; } .hero-slide-title { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.22; margin: 2px 0 0; letter-spacing: -.01em; } .hero-slide-desc { color: rgba(255,255,255,.7); font-size: 12.5px; line-height: 1.55; margin: 0; } .hero-slide-list { list-style: none; padding: 0; margin: 4px 0 2px; display: flex; flex-direction: column; gap: 6px; } .hero-slide-list li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(255,255,255,.85); font-weight: 500; } .hero-slide-list i { color: var(--green-mid); font-size: 14px; } .hero-slide-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: 8px 15px; font-size: 12.5px; font-weight: 700; align-self: flex-start; margin-top: auto; transition: var(--transition); } .hero-slide-btn:hover { background: #fff; color: var(--primary); transform: translateY(-2px); } .hero-slide-btn i { font-size: 14px; } .hero-topic-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; } .hero-topic-pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 50px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85); } .hero-tutor-row { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; } .hero-tutor-chip { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9); } .hero-tutor-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; } .hero-carousel-indicators { bottom: 10px; margin-bottom: 0; } .hero-carousel-indicators button { width: 8px !important; height: 8px !important; border-radius: 50%; border: 0; background: rgba(255,255,255,.4) !important; opacity: 1 !important; } .hero-carousel-indicators button.active { background: #fff !important; transform: scale(1.25); } /* ════════════════════════════════════════════════════════ SECTION LABELS ════════════════════════════════════════════════════════ */ .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--green-light); color: var(--green); border-radius: 50px; padding: 5px 14px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; } .section-eyebrow.blue { background: var(--blue-light); color: var(--blue); } .section-eyebrow.gold { background: var(--gold-light); color: var(--gold); } .section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: var(--primary); letter-spacing: -.025em; line-height: 1.2; } .section-subtitle { font-size: 1.05rem; color: var(--text-mid); max-width: 560px; line-height: 1.7; } /* ════════════════════════════════════════════════════════ OFFERINGS ════════════════════════════════════════════════════════ */ .offerings { background: var(--surface); } .offering-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; align-items: flex-start; gap: 20px; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; overflow: hidden; } .offering-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .offering-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-light); } .offering-card:hover::before { transform: scaleX(1); } .offering-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: var(--transition); } .offering-card:hover .offering-icon { transform: scale(1.1) rotate(-3deg); } .offering-icon-green { background: var(--green-light); color: var(--green); } .offering-icon-blue { background: var(--blue-light); color: var(--blue); } .offering-icon-gold { background: var(--gold-light); color: var(--gold); } .offering-icon-purple{ background: #EDE9FE; color: #7C3AED; } .offering-title { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; } .offering-desc { font-size: 14px; color: var(--text-mid); line-height: 1.65; } /* ════════════════════════════════════════════════════════ GRADE CARDS (compact) ════════════════════════════════════════════════════════ */ .grades-section { background: var(--bg); } .grade-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 12px; text-align: center; cursor: pointer; box-shadow: var(--shadow-xs); transition: var(--transition); position: relative; overflow: hidden; } .grade-card::after { content: ''; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .3s var(--ease); border-radius: var(--radius-sm); } .grade-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .grade-card:hover::after { opacity: 1; } .grade-card:hover .grade-number, .grade-card:hover .grade-label, .grade-card:hover .grade-subjects, .grade-card:hover .grade-cta { color: #fff; } .grade-card:hover .grade-badge { background: rgba(255,255,255,.25); color: #fff; } .grade-number { font-size: 1.8rem; font-weight: 900; letter-spacing: -.04em; color: var(--primary); transition: var(--transition); position: relative; z-index: 1; line-height: 1; } .grade-card:hover .grade-number { color: #fff; } .grade-label { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 4px; position: relative; z-index: 1; transition: var(--transition); } .grade-subjects { font-size: 10.5px; color: var(--text-muted); margin-bottom: 8px; position: relative; z-index: 1; transition: var(--transition); line-height: 1.35; } .grade-badge { display: inline-block; background: var(--bg); border-radius: 50px; padding: 2px 9px; font-size: 9.5px; font-weight: 600; color: var(--text-mid); transition: var(--transition); position: relative; z-index: 1; letter-spacing: .03em; } .grade-cta { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--green); margin-top: 8px; opacity: 0; transform: translateY(4px); transition: var(--transition); position: relative; z-index: 1; } .grade-card:hover .grade-cta { opacity: 1; transform: translateY(0); color: #fff; } .grade-card[data-grade="1"] { --grad: #0D2137; } .grade-card[data-grade="2"] { --grad: #065F46; } .grade-card[data-grade="3"] { --grad: #2563EB; } .grade-card[data-grade="4"] { --grad: #7C3AED; } .grade-card[data-grade="5"] { --grad: #10B981; } .grade-card[data-grade="6"] { --grad: #DC2626; } .grade-card[data-grade="7"] { --grad: #0891B2; } .grade-card[data-grade="8"] { --grad: #047857; } /* ════════════════════════════════════════════════════════ TRUST STATS ════════════════════════════════════════════════════════ */ .trust-section { background: var(--primary); padding: 70px 0; } .stat-card { text-align: center; padding: 30px 20px; border-right: 1px solid rgba(255,255,255,.1); } .stat-card:last-child { border-right: none; } .stat-number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1; } .stat-number span { color: var(--green-mid); } .stat-label { font-size: 13.5px; color: rgba(255,255,255,.55); margin-top: 8px; font-weight: 500; } .stat-icon { font-size: 2rem; margin-bottom: 12px; } /* ════════════════════════════════════════════════════════ TESTIMONIALS ════════════════════════════════════════════════════════ */ .testimonials-section { background: var(--surface); } .testimonial-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; position: relative; box-shadow: var(--shadow-sm); } .testimonial-card::before { content: '\201C'; font-size: 5rem; font-family: 'Poppins', sans-serif; color: var(--green); line-height: 1; position: absolute; top: 16px; left: 30px; opacity: .3; font-weight: 900; } .testimonial-text { font-size: 1rem; color: var(--text); line-height: 1.8; font-style: italic; margin-bottom: 24px; padding-top: 20px; } .testimonial-author { display: flex; align-items: center; gap: 14px; } .testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0; } .testimonial-name { font-weight: 700; font-size: 14.5px; color: var(--primary); } .testimonial-role { font-size: 12.5px; color: var(--text-muted); } .testimonial-stars { color: var(--gold); font-size: 13px; margin-bottom: 2px; } .carousel-indicators button { width: 8px !important; height: 8px !important; border-radius: 50% !important; background-color: var(--border) !important; border: none !important; } .carousel-indicators button.active { background-color: var(--green) !important; } .carousel-control-prev, .carousel-control-next { width: 44px !important; height: 44px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 50% !important; top: 50% !important; transform: translateY(-50%) !important; box-shadow: var(--shadow-sm) !important; } .carousel-control-prev { left: -22px !important; } .carousel-control-next { right: -22px !important; } .carousel-control-prev-icon { filter: invert(1) brightness(.3); transform: scale(.6); } .carousel-control-next-icon { filter: invert(1) brightness(.3); transform: scale(.6); } /* ════════════════════════════════════════════════════════ BOOKING ════════════════════════════════════════════════════════ */ .booking-section { background: var(--bg); padding: 20px 0 36px; } .booking-card { background: var(--primary); border-radius: var(--radius-lg); padding: 28px 36px; position: relative; overflow: hidden; } .booking-form { position: relative; z-index: 1; } .form-control-ss { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm); padding: 13px 16px; color: #fff; font-size: 14px; width: 100%; transition: var(--transition); outline: none; font-family: 'Inter', sans-serif; } .form-control-ss::placeholder { color: rgba(255,255,255,.45); } .form-control-ss:focus { background: rgba(255,255,255,.15); border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(16,185,129,.2); } .form-control-ss option { background: var(--primary); color: #fff; } .form-label-ss { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.7); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; display: block; } /* ════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════ */ .ss-footer { background: var(--primary); padding: 60px 0 0; border-top: 1px solid rgba(255,255,255,.06); } .footer-brand-text { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.2rem; color: #fff; } .footer-tagline { font-size: 13.5px; color: rgba(255,255,255,.45); margin-top: 10px; line-height: 1.6; max-width: 260px; } .footer-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.4); margin-bottom: 18px; } .footer-link { display: block; font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 10px; transition: var(--transition); } .footer-link:hover { color: var(--green-mid); padding-left: 4px; } .footer-soon { display: block; font-size: 12px; font-style: italic; color: rgba(255,255,255,.35); margin-top: 6px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 20px 0; margin-top: 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: 13px; color: rgba(255,255,255,.35); } .footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 14px; margin-left: 8px; transition: var(--transition); } .footer-social a:hover { background: var(--green); color: #fff; transform: translateY(-2px); } /* ════════════════════════════════════════════════════════ ABOUT PAGE ════════════════════════════════════════════════════════ */ .page-hero { background: var(--primary); padding: 48px 0 52px; position: relative; overflow: hidden; } .page-hero-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #fff; } .page-hero-sub { color: rgba(255,255,255,.65); font-size: 1.05rem; margin-top: 12px; } .page-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 20px; } .page-breadcrumb a { color: rgba(255,255,255,.55); } .page-breadcrumb a:hover { color: var(--green-mid); } .page-breadcrumb i { font-size: 10px; } .mission-card { background: var(--surface); border-radius: var(--radius-lg); padding: 40px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .mission-icon { width: 60px; height: 60px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; } .value-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: var(--transition); display: flex; align-items: flex-start; gap: 18px; } .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-light); } .value-num { font-size: 2rem; font-weight: 900; color: var(--border); line-height: 1; flex-shrink: 0; font-family: 'Poppins', sans-serif; } .teacher-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: var(--transition); text-align: center; } .teacher-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-light); } .teacher-avatar { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: #fff; margin: 0 auto 18px; } .teacher-role { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green); margin-bottom: 6px; } .teacher-name { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; } .teacher-qual { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; } .teacher-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .teacher-tag { background: var(--bg); border: 1px solid var(--border); border-radius: 50px; padding: 3px 11px; font-size: 11.5px; font-weight: 600; color: var(--text-mid); } /* ════════════════════════════════════════════════════════ WORKSHEETS PAGE ════════════════════════════════════════════════════════ */ .worksheets-page { background: var(--bg); min-height: 80vh; } .ws-layout { display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: 70vh; } .ws-sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 28px 0; position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; } .ws-sidebar-heading { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); padding: 0 22px 12px; } .ws-grade-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 22px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-mid); transition: var(--transition); text-align: left; } .ws-grade-btn:hover { background: var(--bg); color: var(--primary); } .ws-grade-btn.active { background: var(--green-light); color: var(--green); } .ws-grade-btn .ws-grade-dot { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; transition: var(--transition); } .ws-grade-btn.active .ws-grade-dot { background: var(--green); color: #fff; } .ws-grade-btn:not(.active) .ws-grade-dot { background: var(--bg); color: var(--text-mid); } .ws-main { padding: 36px; } .ws-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 28px; flex-wrap: wrap; } .ws-breadcrumb span { color: var(--text-mid); font-weight: 600; } .ws-breadcrumb .crumb-sep { color: var(--border); } .ws-breadcrumb a { color: var(--text-mid); font-weight: 500; } .ws-breadcrumb a:hover { color: var(--green); } .ws-panel { display: none; } .ws-panel.active { display: block; animation: fadeSlideIn .3s var(--ease); } @keyframes fadeSlideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .ws-grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .ws-grade-sel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); } .ws-grade-sel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green); } .ws-grade-sel-num { font-size: 2.5rem; font-weight: 900; color: var(--primary); line-height: 1; letter-spacing: -.04em; } .ws-grade-sel-lbl { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; } .ws-grade-sel-count { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; } /* ── Advanced Maths (modules) ────────────────────────── */ .ws-sidebar-heading-2 { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); } .ws-grade-btn-adv.active { background: rgba(124, 58, 237, .12); color: #7C3AED; } .ws-grade-dot-adv { background: rgba(124, 58, 237, .12) !important; color: #7C3AED !important; } .ws-grade-btn-adv.active .ws-grade-dot-adv { background: #7C3AED !important; color: #fff !important; } .ws-section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green); background: var(--green-light); border-radius: 999px; padding: 6px 14px; margin-bottom: 14px; } .ws-section-eyebrow-adv { color: #7C3AED; background: rgba(124, 58, 237, .12); } .ws-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .ws-module-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; overflow: hidden; } .ws-module-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mod-accent, #7C3AED); } .ws-module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--mod-accent, #7C3AED); } .ws-module-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(124, 58, 237, .12); color: var(--mod-accent, #7C3AED); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; } .ws-module-name { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin-bottom: 6px; } .ws-module-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.5; margin-bottom: 14px; } .ws-module-meta { font-size: 12.5px; font-weight: 700; color: var(--mod-accent, #7C3AED); display: flex; align-items: center; gap: 6px; } .ws-module-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; } /* ── Programs page ───────────────────────────────────── */ .program-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 7px 16px; border-radius: 999px; } .program-eyebrow-green { background: var(--green-light); color: var(--green); } .program-eyebrow-purple { background: rgba(124, 58, 237, .12); color: #7C3AED; } .program-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; position: relative; overflow: hidden; } .program-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #7C3AED; } .program-card-purple::before { background: #7C3AED; } .program-card-coming::before { background: var(--border); } .program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #7C3AED; color: inherit; } .program-card-coming { cursor: default; } .program-card-coming:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); } .program-card-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: rgba(124, 58, 237, .12); color: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; } .program-card-icon-muted { background: var(--bg); color: var(--text-muted); } .program-card-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 8px; } .program-card-title { font-size: 1.3rem; font-weight: 800; color: var(--primary); margin-bottom: 10px; } .program-card-desc { font-size: 14.5px; color: var(--text-mid); line-height: 1.65; margin-bottom: 18px; } .program-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #7C3AED; text-decoration: none; } .program-card-coming .program-card-cta { color: var(--text-mid); } .ws-subject-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; } .ws-subject-tab { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 50px; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); font-weight: 600; font-size: 14px; color: var(--text-mid); transition: var(--transition); } .ws-subject-tab:hover { border-color: var(--green); color: var(--green); } .ws-subject-tab.active { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(5,150,105,.3); } .ws-subject-tab i { font-size: 16px; } .ws-topic-accordion { display: flex; flex-direction: column; gap: 10px; } .ws-topic-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); } .ws-topic-item:hover { border-color: var(--green-light); } .ws-topic-item.open { border-color: var(--green); box-shadow: var(--shadow-sm); } .ws-topic-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; cursor: pointer; user-select: none; transition: var(--transition); } .ws-topic-header:hover { background: var(--bg); } .ws-topic-item.open .ws-topic-header { background: var(--green-light); } .ws-topic-name { font-size: 15px; font-weight: 700; color: var(--primary); } .ws-topic-item.open .ws-topic-name { color: var(--green); } .ws-topic-count { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .ws-topic-chevron { font-size: 16px; color: var(--text-muted); transition: transform .3s var(--ease); } .ws-topic-item.open .ws-topic-chevron { transform: rotate(180deg); color: var(--green); } .ws-topic-body { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); } .ws-topic-item.open .ws-topic-body { max-height: 1000px; } .ws-subtopics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px 22px 20px; } .ws-subtopic-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; transition: var(--transition); } .ws-subtopic-card:hover { border-color: var(--green); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .ws-subtopic-title { font-size: 13.5px; font-weight: 700; color: var(--primary); margin-bottom: 5px; } .ws-subtopic-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin-bottom: 10px; } .ws-download-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--green); color: #fff; border: none; border-radius: 50px; padding: 7px 16px; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); text-decoration: none; } .ws-download-btn:hover { background: var(--green-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,150,105,.3); text-decoration: none; } .ws-download-btn-pending { background: var(--bg); color: var(--text-mid); border: 1.5px dashed var(--border); } .ws-download-btn-pending:hover { background: var(--surface); color: var(--text); border-color: var(--text-muted); box-shadow: none; transform: none; } .ws-back-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--text-mid); font-size: 14px; font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; transition: var(--transition); margin-bottom: 24px; } .ws-back-btn:hover { color: var(--green); } /* ════════════════════════════════════════════════════════ CONTACT PAGE ════════════════════════════════════════════════════════ */ .contact-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); display: flex; align-items: flex-start; gap: 18px; transition: var(--transition); } .contact-info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .contact-info-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; } .contact-info-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; } .contact-info-val { font-size: 15px; font-weight: 600; color: var(--primary); } .contact-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-md); } .form-control-light { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; font-size: 14.5px; width: 100%; color: var(--text); transition: var(--transition); outline: none; font-family: 'Inter', sans-serif; } .form-control-light:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5,150,105,.12); background: #fff; } .form-label-light { font-size: 12.5px; font-weight: 600; color: var(--text-mid); margin-bottom: 7px; display: block; } textarea.form-control-light { resize: vertical; min-height: 130px; } /* ════════════════════════════════════════════════════════ ANIMATIONS & MISC ════════════════════════════════════════════════════════ */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .fade-up.visible { opacity: 1; transform: translateY(0); } .ss-toast { position: fixed; bottom: 28px; right: 28px; background: var(--primary); color: #fff; border-radius: var(--radius); padding: 14px 22px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-xl); z-index: 99999; display: flex; align-items: center; gap: 10px; transform: translateY(80px); opacity: 0; transition: var(--transition); } .ss-toast.show { transform: translateY(0); opacity: 1; } .ss-toast i { color: var(--green-mid); font-size: 18px; } /* ════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════ */ @media (max-width: 991px) { .ws-layout { grid-template-columns: 1fr; } .ws-sidebar { position: relative; top: 0; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 16px 0; } .ws-main { padding: 24px 16px; } .booking-card { padding: 22px 22px; } .stat-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); } .stat-card:last-child { border-bottom: none; } /* Collapsed mobile nav menu — tighter, tappable rows on the dark bar */ .ss-nav .navbar-collapse { padding: 6px 0 12px; } .ss-nav .nav-link { padding: 11px 4px !important; } .ss-nav .nav-link::after { display: none; } /* Tap a parent to expand its submenu inline (toggled via .open in JS) */ .ss-nav .nav-item.dropdown > .dropdown-menu { display: none; margin: 4px 0 6px 10px; } .ss-nav .nav-item.dropdown.open > .dropdown-menu { display: block; } .ss-nav .dropdown-toggle::after { float: right; margin-top: 9px; transition: transform .2s var(--ease); } .ss-nav .nav-item.dropdown.open > .dropdown-toggle::after { transform: rotate(180deg); } .ss-nav .btn-nav-cta { display: inline-block; margin: 12px 0 4px; text-align: center; } } @media (max-width: 767px) { .section-pad { padding: 32px 0; } .section-pad-lg { padding: 44px 0; } .hero { padding: 40px 0; min-height: auto; } .hero-headline { font-size: 1.75rem; } .hero-sub { font-size: .98rem; } .hero-carousel { max-width: 320px; } /* Stack the hero CTAs full-width for easy tapping */ .hero-actions { width: 100%; } .hero-actions .btn-ss-primary, .hero-actions .btn-ss-secondary { flex: 1 1 100%; justify-content: center; } .page-hero { padding: 48px 0 52px; } .page-hero-sub { font-size: .98rem; } .section-subtitle { font-size: .98rem; } .booking-card { padding: 20px 18px; } .ws-grade-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .ws-subtopics-grid { grid-template-columns: 1fr; } .contact-form-card { padding: 28px 20px; } } @media (max-width: 480px) { .section-pad { padding: 44px 0; } .section-title { font-size: 1.5rem; } .hero-headline { font-size: 1.6rem; } .page-hero-title { font-size: 1.7rem; } .booking-card { padding: 18px 14px; } .why-card, .offering-card { padding: 24px 20px; } .ws-grade-grid { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════════════════ FLOATING CONTACT WIDGET (combined call + WhatsApp) ════════════════════════════════════════════════════════ */ .contact-fab { --fab-base: 28px; --fab-lift: 0px; position: fixed; right: 22px; bottom: calc(var(--fab-base) + var(--fab-lift)); z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; transition: bottom .2s var(--ease); } .contact-fab-toggle { display: inline-flex; align-items: center; gap: 10px; background: var(--green); color: #fff; font-weight: 700; font-size: 14.5px; padding: 14px 22px; border-radius: 50px; border: 2px solid rgba(255,255,255,.2); cursor: pointer; box-shadow: 0 10px 30px rgba(5,150,105,.45), 0 4px 14px rgba(5,150,105,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); letter-spacing: .01em; } .contact-fab-toggle:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 38px rgba(5,150,105,.55), 0 6px 18px rgba(5,150,105,.4); } .contact-fab-toggle-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; position: relative; transition: opacity .2s var(--ease), transform .25s var(--ease); } .contact-fab-toggle-icon::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); animation: contactPulse 1.6s ease-out infinite; } .contact-fab-toggle-icon::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); animation: contactPulse 1.6s ease-out infinite .4s; } .contact-fab-toggle-close { position: absolute; opacity: 0; transform: rotate(-90deg); } .contact-fab-toggle-close::before, .contact-fab-toggle-close::after { display: none; } .contact-fab.open .contact-fab-toggle { background: var(--primary); } .contact-fab.open .contact-fab-toggle-icon:not(.contact-fab-toggle-close) { opacity: 0; } .contact-fab.open .contact-fab-toggle-close { opacity: 1; transform: rotate(0); } @keyframes contactPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } } .contact-fab-toggle-text { font-size: 14.5px; font-weight: 800; } .contact-fab-menu { display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; transform: translateY(12px) scale(.96); transform-origin: bottom right; transition: opacity .22s var(--ease), transform .25s var(--ease); } .contact-fab.open .contact-fab-menu { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .contact-fab-option { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 50px; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.12); min-width: 230px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .contact-fab-option:hover { transform: translateY(-2px); color: #fff; } .contact-fab-call { background: var(--blue); } .contact-fab-chat { background: #128C7E; } .contact-fab-sms { background: #7C3AED; } .contact-fab-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .contact-fab-text { display: flex; flex-direction: column; line-height: 1.15; } .contact-fab-label { font-size: 14px; font-weight: 800; } .contact-fab-sub { font-size: 11.5px; font-weight: 500; opacity: .85; } @media (max-width: 575px) { .contact-fab { --fab-base: 14px; right: 14px; gap: 10px; } .contact-fab-toggle { padding: 10px 14px; font-size: 12.5px; } .contact-fab-toggle-icon { width: 30px; height: 30px; font-size: 15px; } .contact-fab-toggle-text { font-size: 13px; } .contact-fab-option { min-width: 200px; padding: 10px 14px; } .contact-fab-label { font-size: 13px; } } /* ════════════════════════════════════════════════════════ WHY CHOOSE US ════════════════════════════════════════════════════════ */ .why-section { background: var(--bg); } .why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; height: 100%; transition: var(--transition); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .why-card::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--why-accent, var(--green)); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); } .why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--why-accent, var(--green-light)); } .why-card:hover::before { transform: scaleY(1); } .why-icon-wrap { width: 56px; height: 56px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; background: var(--why-bg, var(--green-light)); color: var(--why-accent, var(--green)); transition: var(--transition); } .why-card:hover .why-icon-wrap { transform: rotate(-6deg) scale(1.07); } .why-title { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; } .why-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; margin-bottom: 14px; } .why-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--why-accent, var(--green)); text-transform: uppercase; letter-spacing: .06em; } /* ════════════════════════════════════════════════════════ HOW IT WORKS — FLOW DIAGRAM ════════════════════════════════════════════════════════ */ .hiw-section { background: var(--bg); } /* Flow wrapper */ .hiw-flow { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } /* ── Step cards ── */ .hiw-card { width: 100%; display: flex; align-items: flex-start; gap: 20px; background: var(--surface); border-radius: 18px; padding: 24px 26px; box-shadow: var(--shadow); border: 1px solid var(--border); position: relative; transition: var(--transition); } .hiw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .hiw-card--blue { border-left: 4px solid #3B82F6; } .hiw-card--purple { border-left: 4px solid #8B5CF6; } .hiw-card--teal { border-left: 4px solid #06B6D4; } .hiw-card--green { border-left: 4px solid #10B981; } .hiw-card--success{ border-left: 4px solid var(--green); } .hiw-card--reroute{ border-left: 4px solid #F97316; } .hiw-card-icon { flex-shrink: 0; width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.16); } .hiw-card-body { flex: 1; min-width: 0; } .hiw-step-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 4px; } .hiw-card-title { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; } .hiw-card-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; margin-bottom: 12px; } /* Tags */ .hiw-tags { display: flex; flex-wrap: wrap; gap: 8px; } .hiw-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-mid); background: var(--bg); border: 1px solid var(--border); border-radius: 50px; padding: 4px 12px; } .hiw-tag i { font-size: 11px; color: var(--green); } /* Dual callouts — Step 4 */ .hiw-dual-callouts { display: flex; gap: 12px; } .hiw-callout { flex: 1; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; } .hiw-callout--a { background: #EFF6FF; border: 1px solid #BFDBFE; } .hiw-callout--b { background: #F0FDF4; border: 1px solid #BBF7D0; } .hiw-callout i { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; } .hiw-callout--a i { color: #3B82F6; } .hiw-callout--b i { color: #059669; } .hiw-callout strong { display: block; font-size: 12.5px; color: var(--primary); margin-bottom: 2px; } .hiw-callout span { font-size: 12px; color: var(--text-mid); line-height: 1.5; } /* ── Vertical connector with arrowhead ── */ .hiw-connector { width: 2px; height: 44px; background: linear-gradient(to bottom, var(--green), var(--green-mid)); position: relative; margin: 0 auto; } .hiw-connector::after { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); border-top: 10px solid var(--green-mid); border-left: 6px solid transparent; border-right: 6px solid transparent; } .hiw-connector-dot { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--green); } .hiw-connector--wide { width: 3px; } /* ── Decision diamond ── */ .hiw-decision-wrap { display: flex; flex-direction: column; align-items: center; margin: 4px 0; } .hiw-decision { width: 175px; height: 175px; background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border: 2.5px solid #F59E0B; border-radius: 16px; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 28px rgba(245,158,11,.2); } .hiw-decision-inner { transform: rotate(-45deg); text-align: center; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; } .hiw-decision-inner i { font-size: 1.55rem; color: #D97706; margin-bottom: 4px; } .hiw-decision-q { font-size: 12.5px; color: var(--primary); line-height: 1.4; } .hiw-decision-q strong { font-weight: 800; font-size: 13px; } .hiw-branch-labels { display: flex; gap: 56px; margin-top: 20px; } .hiw-label-yes, .hiw-label-no { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 14px; border-radius: 50px; } .hiw-label-yes { background: #D1FAE5; color: #065F46; } .hiw-label-yes i { color: var(--green); } .hiw-label-no { background: #FEF3C7; color: #78350F; } .hiw-label-no i { color: #D97706; } /* ── Branch columns ── */ .hiw-branches { display: flex; gap: 20px; width: 100%; margin-top: 4px; } .hiw-branch { flex: 1; display: flex; flex-direction: column; align-items: center; } .hiw-branch-arrow { width: 2px; height: 36px; position: relative; margin: 0 auto; } .hiw-branch-arrow--yes { background: linear-gradient(to bottom, var(--green), var(--green-mid)); } .hiw-branch-arrow--no { background: linear-gradient(to bottom, #D97706, #FB923C); } .hiw-branch-arrow::after { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; } .hiw-branch-arrow--yes::after { border-top: 10px solid var(--green-mid); } .hiw-branch-arrow--no::after { border-top: 10px solid #FB923C; } /* Reroute annotation */ .hiw-reroute-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 14px; background: #FFF7ED; border: 1px dashed #FB923C; border-radius: 8px; font-size: 12px; color: #C2410C; line-height: 1.5; } .hiw-reroute-note i { flex-shrink: 0; margin-top: 2px; color: #EA580C; } /* ── Outcome (Happy Child) card ── */ .hiw-outcome { width: 100%; margin-top: 4px; } .hiw-outcome-card { background: linear-gradient(135deg, #ECFDF5 0%, #EFF6FF 50%, #FDF4FF 100%); border: 2px solid #A7F3D0; border-radius: 24px; padding: 40px 32px 36px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(5,150,105,.12); } /* Falling confetti */ .hiw-confetti { position: absolute; top: 0; left: 0; right: 0; height: 55%; pointer-events: none; overflow: hidden; } .hiw-confetti span { position: absolute; top: -12px; left: var(--l); width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%; background: var(--c); animation: hiwConfettiFall 4s var(--d) ease-in infinite; } .hiw-confetti span:nth-child(odd) { border-radius: 2px; } @keyframes hiwConfettiFall { 0% { top: -12px; opacity: 1; transform: translateX(0) rotate(0deg); } 100% { top: 55%; opacity: 0; transform: translateX(20px) rotate(360deg); } } .hiw-child-wrap { position: relative; z-index: 1; display: flex; justify-content: center; margin-bottom: 22px; } .hiw-child-svg { width: 150px; height: 210px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.12)); } .hiw-outcome-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); background: var(--green-light); border: 1px solid #6EE7B7; border-radius: 50px; padding: 4px 16px; margin-bottom: 12px; } .hiw-outcome-title { font-family: 'Poppins', sans-serif; font-size: 1.65rem; font-weight: 800; color: var(--primary); margin-bottom: 10px; } .hiw-outcome-desc { font-size: 14px; color: var(--text-mid); line-height: 1.7; max-width: 440px; margin: 0 auto; } /* ── Responsive ── */ @media (max-width: 767px) { .hiw-flow { padding: 0 4px; } .hiw-dual-callouts { flex-direction: column; } .hiw-branches { flex-direction: column; } .hiw-branch-labels { gap: 16px; flex-wrap: wrap; justify-content: center; } .hiw-decision { width: 148px; height: 148px; } .hiw-decision-q { font-size: 11px; } .hiw-decision-inner i { font-size: 1.3rem; } .hiw-outcome-card { padding: 28px 20px 24px; } .hiw-outcome-title { font-size: 1.35rem; } .hiw-child-svg { width: 120px; height: 168px; } } /* ════════════════════════════════════════════════════════ TRUST RIBBON / BADGES STRIP ════════════════════════════════════════════════════════ */ .trust-ribbon { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 0; } .trust-ribbon-track { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 24px; } .trust-badge { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px; border-radius: 50px; background: var(--bg); border: 1px solid var(--border); transition: var(--transition); } .trust-badge:hover { transform: translateY(-2px); border-color: var(--green-light); box-shadow: var(--shadow-sm); } .trust-badge i { font-size: 22px; color: var(--green); } .trust-badge .tb-text { display: flex; flex-direction: column; line-height: 1.2; } .trust-badge .tb-title { font-size: 13px; font-weight: 700; color: var(--primary); } .trust-badge .tb-sub { font-size: 11.5px; color: var(--text-muted); } /* ════════════════════════════════════════════════════════ FAQ — premium styling ════════════════════════════════════════════════════════ */ .faq-section { background: var(--bg); position: relative; overflow: hidden; } .faq-cat-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 16px; } .faq-expand-row { display: flex; justify-content: flex-end; max-width: 900px; margin: 0 auto 18px; } .faq-expand-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 50px; background: transparent; color: var(--green); border: 1.5px solid var(--green); font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--transition); } .faq-expand-btn:hover { background: var(--green); color: #fff; } .faq-expand-btn i { font-size: 14px; } .faq-cat-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 50px; background: var(--surface); border: 1.5px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text-mid); cursor: pointer; transition: var(--transition); user-select: none; } .faq-cat-tab:hover { border-color: var(--green); color: var(--green); } .faq-cat-tab.active { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(5,150,105,.3); } .faq-cat-tab i { font-size: 14px; } .faq-grid { display: grid; gap: 14px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); } .faq-item.open { border-color: var(--green); box-shadow: 0 8px 24px rgba(5,150,105,.10); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; cursor: pointer; user-select: none; transition: var(--transition); } .faq-q:hover { background: var(--bg); } .faq-item.open .faq-q { background: var(--green-light); } .faq-q-text { font-size: 15px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 14px; } .faq-q-text .faq-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--green-light); color: var(--green); font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 800; flex-shrink: 0; transition: var(--transition); } .faq-item.open .faq-q-text .faq-num { background: var(--green); color: #fff; } .faq-toggle { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--bg); color: var(--text-mid); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease); } .faq-item.open .faq-toggle { background: var(--green); color: #fff; transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .faq-item.open .faq-a { max-height: 460px; } .faq-a-inner { padding: 0 28px 22px 68px; font-size: 14px; color: var(--text-mid); line-height: 1.8; } .faq-a-inner ul { margin: 8px 0 0; padding-left: 18px; } .faq-a-inner ul li { margin-bottom: 4px; } .faq-help-card { background: var(--primary); border-radius: var(--radius-lg); padding: 36px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; position: relative; overflow: hidden; margin-top: 36px; } .faq-help-icon { width: 60px; height: 60px; border-radius: var(--radius); background: rgba(16,185,129,.18); border: 1px solid rgba(16,185,129,.4); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--green-mid); flex-shrink: 0; } .faq-help-text { flex: 1; min-width: 240px; position: relative; z-index: 1; } .faq-help-text h4 { color: #fff; font-size: 1.2rem; margin-bottom: 6px; } .faq-help-text p { color: rgba(255,255,255,.7); font-size: 14px; margin: 0; line-height: 1.65; } /* ════════════════════════════════════════════════════════ FEATURE STRIPS / RIBBON CTA ════════════════════════════════════════════════════════ */ .feature-strip { background: var(--surface); padding: 0 0 0; } .feature-strip-row { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--green-light); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--green-light); } .feature-cell { padding: 26px 22px; display: flex; align-items: flex-start; gap: 14px; border-right: 1px solid rgba(5,150,105,.15); transition: var(--transition); } .feature-cell:last-child { border-right: none; } .feature-cell:hover { background: rgba(255,255,255,.55); } .feature-cell-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; color: var(--green); box-shadow: var(--shadow-xs); } .feature-cell-title { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 3px; } .feature-cell-desc { font-size: 12.5px; color: var(--text-mid); line-height: 1.55; } @media (max-width: 991px) { .feature-strip-row { grid-template-columns: repeat(2, 1fr); } .feature-cell:nth-child(2) { border-right: none; } .feature-cell:nth-child(1), .feature-cell:nth-child(2) { border-bottom: 1px solid rgba(5,150,105,.15); } } @media (max-width: 575px) { .feature-strip-row { grid-template-columns: 1fr; } .feature-cell { border-right: none; border-bottom: 1px solid rgba(5,150,105,.15); } .feature-cell:last-child { border-bottom: none; } } /* ════════════════════════════════════════════════════════ PROGRAMS PAGE — pricing/plan cards & subjects ════════════════════════════════════════════════════════ */ .plan-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 36px 28px; transition: var(--transition); position: relative; overflow: hidden; height: 100%; } .plan-card.featured { border-color: var(--green); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-light); } .plan-card.featured:hover { transform: translateY(-10px); border-color: var(--green); } .plan-ribbon { position: absolute; top: 18px; right: -34px; transform: rotate(35deg); background: var(--gold); color: #fff; padding: 4px 40px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 4px 10px rgba(16,185,129,.3); } .plan-name { font-size: 1.05rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; } .plan-tagline { font-size: 13px; color: var(--text-muted); margin-top: 4px; margin-bottom: 18px; } .plan-price-row { display: flex; align-items: baseline; gap: 6px; padding: 14px 0 18px; border-bottom: 1px dashed var(--border); margin-bottom: 18px; } .plan-price { font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 900; color: var(--primary); letter-spacing: -.03em; line-height: 1; } .plan-cycle { font-size: 13px; color: var(--text-muted); font-weight: 600; } .plan-features { list-style: none; padding: 0; margin: 0 0 22px; } .plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-mid); padding: 6px 0; } .plan-features li i { color: var(--green); font-size: 16px; flex-shrink: 0; margin-top: 1px; } .plan-features li.muted { color: var(--text-muted); } .plan-features li.muted i { color: var(--text-muted); } .subject-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; height: 100%; transition: var(--transition); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .subject-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--green-light); } .subject-card-icon { width: 60px; height: 60px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; } .subject-card-title { font-size: 1.15rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; } .subject-card-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; margin-bottom: 16px; } .subject-card-list { list-style: none; padding: 0; margin: 0 0 18px; } .subject-card-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mid); padding: 4px 0; } .subject-card-list li i { font-size: 14px; color: var(--green); } .subject-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); } /* ════════════════════════════════════════════════════════ NEWSLETTER STRIP ════════════════════════════════════════════════════════ */ .newsletter-strip { background: var(--green-light); border-radius: var(--radius-lg); padding: 38px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; border: 1px solid rgba(5,150,105,.18); } .newsletter-icon { width: 64px; height: 64px; border-radius: var(--radius); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--green); box-shadow: var(--shadow-sm); flex-shrink: 0; } .newsletter-text { flex: 1; min-width: 240px; } .newsletter-text h4 { color: var(--primary); font-size: 1.25rem; margin-bottom: 4px; } .newsletter-text p { color: var(--text-mid); font-size: 14px; margin: 0; } .newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 280px; } .newsletter-input { flex: 1; min-width: 180px; background: #fff; border: 1.5px solid var(--border); border-radius: 50px; padding: 12px 22px; font-size: 14px; color: var(--text); outline: none; transition: var(--transition); font-family: 'Inter', sans-serif; } .newsletter-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5,150,105,.12); } /* ════════════════════════════════════════════════════════ STATS BAR — small inline counter row ════════════════════════════════════════════════════════ */ .inline-stats { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .inline-stats > div { flex: 1 1 180px; padding: 22px 18px; text-align: center; border-right: 1px solid var(--border); } .inline-stats > div:last-child { border-right: none; } .inline-stats .is-num { font-family: 'Poppins', sans-serif; font-size: 1.7rem; font-weight: 900; color: var(--primary); letter-spacing: -.03em; } .inline-stats .is-num span { color: var(--green); } .inline-stats .is-lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } @media (max-width: 575px) { .inline-stats > div { border-right: none; border-bottom: 1px solid var(--border); } .inline-stats > div:last-child { border-bottom: none; } } /* ════════════════════════════════════════════════════════ COMPARISON CARD (us vs them) ════════════════════════════════════════════════════════ */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .compare-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; height: 100%; } .compare-card.us { background: var(--green-light); border-color: var(--green); } .compare-card h5 { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .compare-card.us h5 i { color: var(--green); } .compare-card:not(.us) h5 i { color: var(--text-muted); } .compare-list { list-style: none; padding: 0; margin: 0; } .compare-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-mid); padding: 7px 0; border-bottom: 1px dashed var(--border); } .compare-list li:last-child { border-bottom: none; } .compare-list li i { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .compare-card.us .compare-list li i { color: var(--green); } .compare-card:not(.us) .compare-list li i { color: #DC2626; } @media (max-width: 767px) { .compare-grid { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════ DECORATIVE — section dividers, marquee strip ════════════════════════════════════════════════════════ */ .deco-divider { height: 60px; position: relative; overflow: hidden; background: var(--surface); } .deco-divider svg { position: absolute; bottom: -1px; left: 0; width: 100%; height: 100%; } .marquee-strip { background: var(--primary); color: #fff; padding: 14px 0; overflow: hidden; position: relative; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); } .marquee-track { display: flex; align-items: center; gap: 48px; animation: marquee 32s linear infinite; white-space: nowrap; will-change: transform; } .marquee-strip:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .02em; } .marquee-item i { color: var(--green-mid); font-size: 16px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ════════════════════════════════════════════════════════ ENQUIRY CHIP STYLE (used on contact) ════════════════════════════════════════════════════════ */ .enq-chip { /* fallback — JS in contact.html also styles this */ display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 50px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--text-mid); background: var(--bg); user-select: none; } /* ════════════════════════════════════════════════════════ HOW IT WORKS PAGE — Page Hero & Stats ════════════════════════════════════════════════════════ */ .hiw-page-hero { padding-bottom: 60px; } .hiw-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .hiw-hero-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 50px; padding: 6px 16px; } .hiw-hero-chip i { color: var(--green-mid); } /* Stats strip */ .hiw-stats-strip { background: var(--surface); border-bottom: 1px solid var(--border); padding: 28px 0; } .hiw-stats-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; } .hiw-stat-box { display: flex; align-items: center; gap: 14px; padding: 8px 36px; } .hiw-stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .hiw-stat-num { font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--primary); line-height: 1; } .hiw-stat-label { font-size: 12px; color: var(--text-mid); margin-top: 2px; } .hiw-stat-sep { width: 1px; height: 40px; background: var(--border); flex-shrink: 0; } /* ════════════════════════════════════════════════════════ HOW IT WORKS PAGE — Horizontal Flow Diagram ════════════════════════════════════════════════════════ */ .hiw-page-section { background: var(--bg); padding: 60px 0 70px; } /* Flow wrapper */ .hiw-hflow-wrap { width: 100%; overflow-x: auto; padding-bottom: 8px; } /* Main horizontal track */ .hiw-main-row { display: flex; align-items: flex-start; gap: 0; min-width: 900px; } /* Step cards */ .hiw-hstep { flex: 1; min-width: 0; background: var(--surface); border-radius: 16px; border: 1.5px solid var(--border); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); } .hiw-hstep:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .hiw-hstep--blue { border-top: 3px solid #3B82F6; } .hiw-hstep--purple { border-top: 3px solid #8B5CF6; } .hiw-hstep--teal { border-top: 3px solid #06B6D4; } .hiw-hstep--green { border-top: 3px solid #10B981; } /* Step illustration panel */ .hiw-step-img { height: 84px; width: 100%; overflow: hidden; } .hiw-step-img svg { width: 100%; height: 100%; display: block; } /* Step body content */ .hiw-step-body { padding: 13px 14px 16px; } .hiw-step-num { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 4px; } .hiw-step-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 6px; line-height: 1.35; } .hiw-step-desc { font-size: 11.5px; color: var(--text-mid); line-height: 1.6; margin-bottom: 10px; } .hiw-step-tags { display: flex; flex-wrap: wrap; gap: 5px; } .hiw-step-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; border: 1px solid var(--border); border-radius: 50px; padding: 3px 9px; background: var(--bg); } .hiw-step-tag i { font-size: 9px; } /* Horizontal connector arrows */ .hiw-harrow { flex-shrink: 0; width: 32px; display: flex; align-items: flex-start; justify-content: center; padding-top: 42px; color: var(--green-mid); font-size: 1.15rem; } .hiw-harrow--decision { color: #F59E0B; } /* ── Decision column ── */ .hiw-decision-col { flex-shrink: 0; width: 280px; display: flex; flex-direction: column; align-items: center; gap: 0; } /* Diamond shape */ .hiw-hdiamond { width: 138px; height: 138px; background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border: 2px solid #F59E0B; border-radius: 14px; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(245,158,11,.2); margin-top: 6px; } .hiw-hdiamond-inner { transform: rotate(-45deg); text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .hiw-hdiamond-inner i { font-size: 1.4rem; color: #D97706; } .hiw-hdiamond-inner span { font-size: 11px; font-weight: 700; color: var(--primary); line-height: 1.35; } /* Vertical connector from diamond to labels */ .hiw-vconn { width: 2px; height: 20px; background: linear-gradient(to bottom, #F59E0B, var(--green-mid)); position: relative; margin: 4px auto; } .hiw-vconn::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border-top: 8px solid var(--green-mid); border-left: 5px solid transparent; border-right: 5px solid transparent; } /* Branch labels */ .hiw-hblabels { display: flex; gap: 8px; width: 100%; justify-content: space-between; margin-top: 12px; } .hiw-hblabel-yes, .hiw-hblabel-no { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 5px 8px; border-radius: 50px; text-align: center; } .hiw-hblabel-yes { background: #D1FAE5; color: #065F46; } .hiw-hblabel-yes i { color: var(--green); } .hiw-hblabel-no { background: #FEF3C7; color: #78350F; } .hiw-hblabel-no i { color: #D97706; } /* Branch cards row */ .hiw-hbranches { display: flex; gap: 8px; width: 100%; margin-top: 6px; } .hiw-hbr { flex: 1; display: flex; flex-direction: column; align-items: center; } /* Vertical arrow above each branch card */ .hiw-bav { width: 2px; height: 22px; position: relative; margin: 0 auto; } .hiw-bav--yes { background: linear-gradient(to bottom, var(--green), var(--green-mid)); } .hiw-bav--no { background: linear-gradient(to bottom, #D97706, #FB923C); } .hiw-bav::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; } .hiw-bav--yes::after { border-top: 8px solid var(--green-mid); } .hiw-bav--no::after { border-top: 8px solid #FB923C; } /* Branch card */ .hiw-hbr-card { width: 100%; background: var(--surface); border-radius: 12px; border: 1.5px solid var(--border); overflow: hidden; box-shadow: var(--shadow-sm); } .hiw-hbr--yes { border-top: 3px solid var(--green); } .hiw-hbr--no { border-top: 3px solid #F97316; } .hiw-hbr-img { height: 70px; overflow: hidden; } .hiw-hbr-img svg { width: 100%; height: 100%; display: block; } .hiw-hbr-body { padding: 11px 12px 13px; } .hiw-hbr-title { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 4px; line-height: 1.3; } .hiw-hbr-desc { font-size: 11px; color: var(--text-mid); line-height: 1.55; } .hiw-hbr-note { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: #EA580C; background: #FFF7ED; border: 1px dashed #FB923C; border-radius: 6px; padding: 5px 8px; margin-top: 7px; } /* ── Converge + Outcome ── */ .hiw-outcome-section { width: 100%; margin-top: 20px; min-width: 900px; } .hiw-outcome-converge { display: flex; align-items: center; justify-content: flex-end; padding-right: 140px; height: 32px; position: relative; } .hiw-oc-line { height: 2px; background: linear-gradient(to right, var(--green-mid), var(--green)); flex: 1; } .hiw-oc-line--left { max-width: 120px; } .hiw-oc-line--right { max-width: 120px; background: linear-gradient(to right, #FB923C, var(--green-mid)); } .hiw-oc-arrow { width: 0; height: 0; border-left: 8px solid var(--green); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: rotate(90deg); } /* Outcome card */ .hiw-outcome-card { background: linear-gradient(135deg, #ECFDF5 0%, #EFF6FF 50%, #FDF4FF 100%); border: 2px solid #A7F3D0; border-radius: 24px; padding: 36px 32px 32px; display: flex; align-items: center; gap: 40px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(5,150,105,.1); } .hiw-child-wrap { flex-shrink: 0; position: relative; z-index: 1; } .hiw-child-svg { width: 110px; height: 154px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.1)); } .hiw-outcome-text { flex: 1; position: relative; z-index: 1; } .hiw-outcome-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); background: var(--green-light); border: 1px solid #6EE7B7; border-radius: 50px; padding: 4px 16px; margin-bottom: 12px; } .hiw-outcome-title { font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--primary); margin-bottom: 10px; } .hiw-outcome-desc { font-size: 14px; color: var(--text-mid); line-height: 1.7; max-width: 480px; } /* Confetti animation (reused from main flow) */ .hiw-confetti { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; } .hiw-confetti span { position: absolute; top: -12px; left: var(--l); width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%; background: var(--c); animation: hiwConfettiFall 4s var(--d) ease-in infinite; } .hiw-confetti span:nth-child(odd) { border-radius: 2px; } @keyframes hiwConfettiFall { 0% { top: -12px; opacity: 1; transform: translateX(0) rotate(0deg); } 100% { top: 100%; opacity: 0; transform: translateX(20px) rotate(360deg); } } /* ════════════════════════════════════════════════════════ HOW IT WORKS PAGE — Why This Process / Why Cards ════════════════════════════════════════════════════════ */ .hiw-why-card { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 28px 26px; height: 100%; transition: var(--transition); } .hiw-why-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .hiw-why-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 16px; } .hiw-why-title { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; } .hiw-why-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.75; } /* ════════════════════════════════════════════════════════ HOW IT WORKS PAGE — Timeline ════════════════════════════════════════════════════════ */ .hiw-timeline { max-width: 700px; margin: 0 auto; position: relative; } .hiw-timeline::before { content: ''; position: absolute; left: 8px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(to bottom, #3B82F6, #8B5CF6, #06B6D4, #10B981, #F59E0B); } .hiw-tl-item { display: flex; align-items: flex-start; gap: 24px; padding: 0 0 32px; position: relative; } .hiw-tl-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--border); margin-top: 2px; position: relative; z-index: 1; } .hiw-tl-dot--blue { background: #3B82F6; } .hiw-tl-dot--purple { background: #8B5CF6; } .hiw-tl-dot--teal { background: #06B6D4; } .hiw-tl-dot--green { background: #10B981; } .hiw-tl-dot--gold { background: #F59E0B; } .hiw-tl-when { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 4px; } .hiw-tl-title { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 6px; } .hiw-tl-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; } /* ════════════════════════════════════════════════════════ HOW IT WORKS PAGE — Guarantees ════════════════════════════════════════════════════════ */ .hiw-guarantee-card { background: var(--surface); border: 1px solid #A7F3D0; border-radius: 18px; padding: 28px 26px; transition: var(--transition); } .hiw-guarantee-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .hiw-guarantee-icon { width: 50px; height: 50px; border-radius: 14px; background: var(--green-light); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--green); margin-bottom: 16px; } .hiw-guarantee-title { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; } .hiw-guarantee-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.75; } /* ════════════════════════════════════════════════════════ HOW IT WORKS PAGE — Responsive ════════════════════════════════════════════════════════ */ @media (max-width: 991px) { .hiw-stat-box { padding: 8px 20px; } .hiw-decision-col { width: 240px; } .hiw-hdiamond { width: 120px; height: 120px; } .hiw-hdiamond-inner span { font-size: 10px; } } @media (max-width: 767px) { .hiw-stats-row { gap: 16px; } .hiw-stat-sep { display: none; } .hiw-stat-box { padding: 8px 12px; } .hiw-outcome-card { flex-direction: column; text-align: center; padding: 28px 20px; gap: 20px; } .hiw-outcome-desc { max-width: 100%; } .hiw-outcome-title { font-size: 1.3rem; } .hiw-child-svg { width: 90px; height: 126px; } .hiw-timeline::before { left: 7px; } .hiw-timeline { padding: 0 4px; } } /* Mini happy-child outcome card (used inside the YES branch) */ .hiw-mini-outcome { width: 100%; margin-top: 0; background: linear-gradient(135deg, #ECFDF5, #EFF6FF); border: 1.5px solid #A7F3D0; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; position: relative; overflow: hidden; } .hiw-mini-outcome::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 50%, rgba(167,243,208,.3), transparent 60%); pointer-events: none; } .hiw-mini-child-svg { width: 36px; height: 50px; flex-shrink: 0; position: relative; z-index: 1; } .hiw-mini-outcome-content { flex: 1; position: relative; z-index: 1; min-width: 0; } .hiw-mini-outcome-label { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); display: flex; align-items: center; gap: 3px; margin-bottom: 2px; } .hiw-mini-outcome-title { font-size: 11.5px; font-weight: 800; color: var(--primary); line-height: 1.2; margin-bottom: 2px; } .hiw-mini-outcome-sub { font-size: 10px; color: var(--text-mid); line-height: 1.4; } /* ════════════════════════════════════════════════════════ HOW IT WORKS — FLOW DIAGRAM Steps 1→4 across the top; a connector drops from Step 4 into the decision diamond, which branches into NO (Rematch → loops back to Step 02) and YES (Regular Sessions → Happy Learner). Pure flexbox/grid — fully responsive, no SVG overlays. ════════════════════════════════════════════════════════ */ .hiw-flow { width: 100%; max-width: 1060px; margin: 0 auto; } /* Steps row */ .hiw-flow-steps { display: flex; align-items: stretch; gap: 4px; } .hiw-flow-steps .hiw-hstep { flex: 1 1 0; min-width: 0; } .hiw-flow-arrow { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; color: var(--green-mid); font-size: 1.3rem; } /* Tail: full width. The stem + diamond hug the right (under Step 4); the branches below span the full width so the NO branch fills the left side. */ .hiw-flow-tail { display: flex; flex-direction: column; align-items: stretch; width: 100%; } /* ── L-connector: drops from Step 4, runs left to diamond ────────────── Step 4 is the 4th of 4 equal-flex columns; its centre sits at ~88.5% from the left (≈ right: 11.5%). The diamond is centred (left: 50%). ::before draws the L-shape. ::after adds the downward arrowhead. The label floats along the horizontal segment. On mobile the L is hidden — just the label shows as centred text. ──────────────────────────────────────────────────────────────────────── */ .hiw-flow-lconnect { position: relative; width: 100%; height: 48px; margin-top: 2px; } .hiw-flow-lconnect::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; /* diamond centre */ right: 11.5%; /* Step 4 centre */ border-right: 2.5px solid var(--green-mid); border-bottom: 2.5px solid var(--green-mid); border-bottom-right-radius: 6px; } /* arrowhead pointing down at the left end (diamond entry) */ .hiw-flow-lconnect::after { content: ''; position: absolute; bottom: -7px; left: calc(50% - 5px); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--green-mid); } .hiw-flow-lconnect-label { position: absolute; bottom: 7px; /* sits just above the horizontal line */ left: calc(50% + 12px); right: calc(11.5% + 12px); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mid); text-align: center; white-space: nowrap; overflow: hidden; } /* Decision diamond — centred, no extra top margin (lconnect provides spacing) */ .hiw-flow-decision { display: flex; justify-content: center; align-self: center; width: 100%; margin: 10px 0 6px; } /* NO / YES branches */ .hiw-flow-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; margin-top: 12px; } .hiw-flow-branch { display: flex; flex-direction: column; align-items: center; gap: 9px; } .hiw-flow-branch .hiw-hbr-card { width: 100%; } .hiw-flow-blabel { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 50px; text-align: center; white-space: nowrap; } .hiw-flow-blabel--no { background: #FEF3C7; color: #92400E; } .hiw-flow-blabel--no i { color: #D97706; } .hiw-flow-blabel--yes { background: #D1FAE5; color: #065F46; } .hiw-flow-blabel--yes i { color: var(--green); } .hiw-flow-bdown { color: var(--green-mid); font-size: 1.25rem; line-height: 1; } /* Per-branch down arrows (from diamond → NO / YES) — always shown */ .hiw-flow-branch-darrow { font-size: 1.1rem; line-height: 1; } .hiw-flow-branch--no .hiw-flow-branch-darrow { color: #F97316; } .hiw-flow-branch--yes .hiw-flow-branch-darrow { color: var(--green-mid); } /* Hide the in-card note on desktop — the external loopback element replaces it */ .hiw-flow-branch--no .hiw-hbr-note { display: none; } @media (max-width: 767px) { .hiw-flow-branch--no .hiw-hbr-note { display: flex; } } /* Desktop-only: loop-back indicator from NO branch → Step 02 */ .hiw-no-loopback { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: #EA580C; background: #FFF7ED; border: 1.5px dashed #FB923C; border-radius: 8px; padding: 7px 12px; margin-top: 6px; width: 100%; } .hiw-no-loopback i { font-size: 15px; flex-shrink: 0; } /* Responsive */ @media (max-width: 991px) { .hiw-flow-branches { gap: 12px; } } @media (max-width: 767px) { /* Steps stack vertically; cards take natural height */ .hiw-flow-steps { flex-direction: column; align-items: stretch; gap: 0; } .hiw-flow-steps .hiw-hstep { flex: 0 0 auto; width: 100%; } /* Connector chevrons rotate to point down */ .hiw-flow-arrow { transform: rotate(90deg); padding: 8px 0; } /* Centre the decision flow */ .hiw-flow-stem, .hiw-flow-decision { align-self: center; width: 100%; } /* On mobile hide the L-shape, show label as centred text above diamond */ .hiw-flow-lconnect { height: auto; margin: 8px 0 4px; } .hiw-flow-lconnect::before, .hiw-flow-lconnect::after { display: none; } .hiw-flow-lconnect-label { position: static; display: block; text-align: center; white-space: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mid); } /* Keep NO and YES side-by-side in two columns */ .hiw-flow-branches { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } /* Scale down branch cards to fit two columns */ .hiw-flow-branch { gap: 5px; } .hiw-flow-branch .hiw-hbr-img { height: 44px; } .hiw-flow-branch .hiw-hbr-body { padding: 7px 8px 9px; } .hiw-flow-branch .hiw-step-num { font-size: 9px; margin-bottom: 2px; } .hiw-flow-branch .hiw-hbr-title { font-size: 10.5px; } .hiw-flow-branch .hiw-hbr-desc { font-size: 9.5px; line-height: 1.4; } .hiw-flow-branch .hiw-hbr-note { font-size: 9px; padding: 4px 6px; } /* Scale down outcome card */ .hiw-flow-branch .hiw-mini-outcome { padding: 7px 8px; gap: 6px; } .hiw-flow-branch .hiw-mini-child-svg { width: 28px; height: 40px; } .hiw-flow-branch .hiw-mini-outcome-title { font-size: 10px; } .hiw-flow-branch .hiw-mini-outcome-sub { font-size: 9px; } /* Hide the desktop loop-back arrow on mobile */ .hiw-no-loopback { display: none; } } /* ════════════════════════════════════════════════════════ NAV DROPDOWN — hover-triggered ════════════════════════════════════════════════════════ */ .ss-nav-dropdown { background: #16314A; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 6px; min-width: 230px; } .ss-nav-dropdown .dropdown-item { color: rgba(255,255,255,.78); font-size: 13.5px; font-weight: 500; border-radius: 6px; padding: 9px 14px; transition: all .18s; } .ss-nav-dropdown .dropdown-item:hover, .ss-nav-dropdown .dropdown-item:focus { background: rgba(255,255,255,.1); color: #fff; } .ss-nav .dropdown-toggle::after { display: none; } /* Desktop hover — override Bootstrap's display:none */ @media (min-width: 992px) { .ss-nav .nav-item.dropdown > .dropdown-menu { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease; margin-top: 0; } .ss-nav .nav-item.dropdown:hover > .dropdown-menu, .ss-nav .nav-item.dropdown.open > .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } } /* ════════════════════════════════════════════════════════ HOMEPAGE PROGRAM SELECTION CARDS ════════════════════════════════════════════════════════ */ .home-prog-card { display: block; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 32px 28px; text-decoration: none; color: var(--text); transition: var(--transition); height: 100%; position: relative; overflow: hidden; } .home-prog-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .home-prog-green::before { background: var(--green); } .home-prog-blue::before { background: #0EA5E9; } .home-prog-purple::before{ background: #7C3AED; } .home-prog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; color: var(--text); } .home-prog-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; } .home-prog-green .home-prog-icon { background: var(--green-light); color: var(--green); } .home-prog-blue .home-prog-icon { background: #E0F2FE; color: #0EA5E9; } .home-prog-purple .home-prog-icon { background: #EDE9FE; color: #7C3AED; } .home-prog-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } .home-prog-green .home-prog-tag { color: var(--green); } .home-prog-blue .home-prog-tag { color: #0EA5E9; } .home-prog-purple .home-prog-tag { color: #7C3AED; } .home-prog-title { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; } .home-prog-desc { font-size: 14px; color: var(--text-mid); line-height: 1.65; margin-bottom: 20px; } .home-prog-cta { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .home-prog-green .home-prog-cta { color: var(--green); } .home-prog-blue .home-prog-cta { color: #0EA5E9; } .home-prog-purple .home-prog-cta { color: #7C3AED; } /* Programs page middle school eyebrow */ .program-eyebrow-blue { display: inline-flex; align-items: center; gap: 7px; background: #E0F2FE; color: #0369A1; border-radius: 50px; padding: 5px 14px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }