Enrichment Enrollment

/* ── RESET & BASE ── */ .sbs-enroll-wrap * { box-sizing: border-box; margin: 0; padding: 0; } .sbs-enroll-wrap { font-family: ‘Roboto’, sans-serif; color: #333333; max-width: 800px; margin: 0 auto; padding: 0 0 60px; } /* ── PROGRESS BAR ── */ .sbs-progress { display: flex; align-items: center; justify-content: center; background: #333333; padding: 16px 20px; margin-bottom: 36px; flex-wrap: wrap; gap: 0; } .sbs-step-ind { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: 0 12px; cursor: default; transition: color 0.2s; } .sbs-step-ind.active { color: #ffffff; } .sbs-step-ind.done { color: rgba(255,255,255,0.55); } .sbs-step-num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; transition: all 0.2s; } .sbs-step-ind.active .sbs-step-num { background: #0068e0; border-color: #0068e0; color: #fff; } .sbs-step-ind.done .sbs-step-num { background: #2a8a4a; border-color: #2a8a4a; color: #fff; } .sbs-step-div { width: 24px; height: 1px; background: rgba(255,255,255,0.15); } /* ── SECTIONS ── */ .sbs-form-section { display: none; } .sbs-form-section.active { display: block; } .sbs-section-head { margin-bottom: 24px; } .sbs-section-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0068e0; margin-bottom: 4px; } .sbs-section-title { font-family: ‘Sansita’, sans-serif; font-size: 28px; font-weight: 400; color: #333333; line-height: 1.2; } .sbs-section-sub { font-size: 14px; color: #808080; margin-top: 6px; line-height: 1.5; } /* ── FIELD GROUPS ── */ .sbs-field-group { background: #ffffff; border: 1px solid #e3e3e3; padding: 22px 24px; margin-bottom: 16px; } .sbs-group-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0068e0; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e3e3e3; } /* ── ROWS & FIELDS ── */ .sbs-row { display: grid; gap: 14px; margin-bottom: 14px; } .sbs-row:last-child { margin-bottom: 0; } .sbs-row-2 { grid-template-columns: 1fr 1fr; } .sbs-row-3 { grid-template-columns: 1fr 1fr 1fr; } .sbs-field { display: flex; flex-direction: column; gap: 5px; } .sbs-field label { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: #333333; } .sbs-field label .req { color: #0068e0; margin-left: 2px; } .sbs-field input, .sbs-field select, .sbs-field textarea { font-family: ‘Roboto’, sans-serif; font-size: 14px; color: #333333; background: #fafafa; border: 1px solid #d0d0d0; padding: 9px 12px; outline: none; border-radius: 3px; transition: border-color 0.15s, background 0.15s; -webkit-appearance: none; } .sbs-field input:focus, .sbs-field select:focus, .sbs-field textarea:focus { border-color: #0068e0; background: #ffffff; } .sbs-field input.sbs-error, .sbs-field select.sbs-error, .sbs-field textarea.sbs-error { border-color: #c0392b; background: #fff5f5; } .sbs-field textarea { resize: vertical; min-height: 72px; } .sbs-field .sbs-hint { font-size: 12px; color: #808080; line-height: 1.4; } .sbs-field .sbs-err-msg { font-size: 12px; color: #c0392b; display: none; } .sbs-field.sbs-has-error .sbs-err-msg { display: block; } /* ── INFO BANNER ── */ .sbs-info-banner { background: #e8f1fc; border-left: 4px solid #0068e0; padding: 12px 16px; font-size: 13px; color: #1a3a6b; margin-bottom: 16px; border-radius: 0 3px 3px 0; line-height: 1.5; } /* ── CLASS CARDS ── */ .sbs-class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; } .sbs-class-card { border: 2px solid #e3e3e3; padding: 14px; cursor: pointer; transition: all 0.15s; position: relative; background: #ffffff; border-radius: 3px; } .sbs-class-card:hover { border-color: #0068e0; background: #f0f6ff; } .sbs-class-card.selected { border-color: #0068e0; background: #e8f1fc; } .sbs-class-card.selected::after { content: ‘✓’; position: absolute; top: 8px; right: 10px; font-size: 13px; font-weight: 700; color: #0068e0; } .sbs-class-card input[type=”checkbox”] { display: none; } .sbs-cc-time { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0068e0; margin-bottom: 4px; } .sbs-cc-name { font-weight: 700; font-size: 13px; margin-bottom: 3px; line-height: 1.3; color: #333333; } .sbs-cc-meta { font-size: 12px; color: #808080; line-height: 1.4; } .sbs-cc-price { font-size: 11px; font-weight: 700; color: #333333; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e3e3e3; } .sbs-cc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .sbs-cc-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; } .sbs-tag-edh { background: #fff3e0; color: #9a6010; } .sbs-tag-gb { background: #e4f4e9; color: #1a6b35; } .sbs-tag-both { background: #e8f1fc; color: #0050a8; } /* ── CHECKBOXES / RELEASES ── */ .sbs-check-field { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid #e3e3e3; background: #fafafa; cursor: pointer; margin-bottom: 8px; border-radius: 3px; } .sbs-check-field:last-child { margin-bottom: 0; } .sbs-check-field input[type=”checkbox”] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: #0068e0; margin-top: 2px; } .sbs-check-field .sbs-check-text { font-size: 13px; color: #333333; line-height: 1.5; } .sbs-check-field .sbs-check-text strong { color: #0068e0; } /* ── PAYMENT OPTIONS ── */ .sbs-pay-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .sbs-pay-card { border: 2px solid #e3e3e3; padding: 16px; cursor: pointer; transition: all 0.15s; display: flex; align-items: flex-start; gap: 10px; border-radius: 3px; background: #ffffff; } .sbs-pay-card:hover { border-color: #0068e0; } .sbs-pay-card.selected { border-color: #0068e0; background: #e8f1fc; } .sbs-pay-card input[type=”radio”] { accent-color: #0068e0; margin-top: 2px; flex-shrink: 0; } .sbs-pay-label { font-weight: 700; font-size: 14px; color: #333333; } .sbs-pay-desc { font-size: 12px; color: #808080; margin-top: 4px; line-height: 1.4; } /* ── ORDER SUMMARY ── */ .sbs-summary-box { background: #333333; color: #ffffff; padding: 20px 24px; margin-bottom: 16px; border-radius: 3px; } .sbs-summary-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #00b3e0; margin-bottom: 12px; } .sbs-summary-line { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .sbs-summary-line:last-child { border-bottom: none; } .sbs-summary-line.sbs-total { font-weight: 700; font-size: 16px; padding-top: 10px; color: #00b3e0; } .sbs-summary-line .sbs-lbl { color: rgba(255,255,255,0.65); } /* ── BUTTONS ── */ .sbs-form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; } .sbs-btn-next { font-family: ‘Roboto’, sans-serif; font-size: 14px; font-weight: 700; background: #0068e0; color: #ffffff; border: none; padding: 13px 28px; cursor: pointer; border-radius: 3px; transition: background 0.2s; } .sbs-btn-next:hover { background: #00b3e0; } .sbs-btn-back { font-family: ‘Roboto’, sans-serif; font-size: 13px; font-weight: 700; background: transparent; color: #808080; border: 1px solid #d0d0d0; padding: 12px 22px; cursor: pointer; border-radius: 3px; transition: all 0.2s; } .sbs-btn-back:hover { border-color: #333333; color: #333333; } .sbs-btn-submit { font-family: ‘Roboto’, sans-serif; font-size: 15px; font-weight: 700; background: #2a8a4a; color: #ffffff; border: none; padding: 14px 32px; cursor: pointer; border-radius: 3px; transition: background 0.2s; } .sbs-btn-submit:hover { background: #1f6b38; } .sbs-btn-submit:disabled { background: #aaa; cursor: not-allowed; } /* ── REVIEW BOX ── */ .sbs-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; line-height: 1.8; margin-bottom: 14px; } /* ── CONFIRMATION ── */ #sbs-confirmation { display: none; text-align: center; padding: 48px 24px; } .sbs-confirm-icon { width: 72px; height: 72px; border-radius: 50%; background: #2a8a4a; color: #ffffff; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .sbs-confirm-title { font-family: ‘Sansita’, sans-serif; font-size: 32px; font-weight: 400; color: #333333; margin-bottom: 10px; } .sbs-confirm-sub { font-size: 15px; color: #808080; line-height: 1.7; max-width: 480px; margin: 0 auto 28px; } .sbs-confirm-box { background: #ffffff; border: 1px solid #e3e3e3; padding: 20px 24px; max-width: 480px; margin: 0 auto; text-align: left; font-size: 14px; line-height: 1.9; border-radius: 3px; } .sbs-confirm-box strong { color: #0068e0; } /* ── ERROR / MISC ── */ .sbs-form-error { color: #c0392b; font-size: 13px; font-weight: 700; padding: 8px 0; display: none; } .sbs-submit-status { font-size: 13px; color: #808080; margin-right: 12px; } @media (max-width: 600px) { .sbs-row-2, .sbs-row-3 { grid-template-columns: 1fr; } .sbs-pay-grid { grid-template-columns: 1fr; } .sbs-class-grid { grid-template-columns: 1fr; } .sbs-review-grid { grid-template-columns: 1fr; } .sbs-progress { padding: 12px 8px; } .sbs-step-ind { padding: 0 6px; font-size: 10px; } .sbs-step-div { width: 10px; } }
1
Student
2
Classes
3
Health
4
Payment
5
Review
Step 1 of 5
Student & Parent Information
Please complete all required fields marked with
Student Information
Required
Required
Required
Select grade… Preschool (age 3) Preschool (age 4) TK Kindergarten 1st Grade 2nd Grade 3rd Grade 4th Grade 5th Grade 9th Grade 10th Grade 11th Grade 12th Grade Required
Parent / Guardian Information
Required
Required
Please enter a valid email
Required
We are a registered vendor. Enter your charter school name if paying with vendor funds.
Select… Friend / Word of mouth Facebook Instagram Flyer Charter school Google search Other
Emergency Contact
Required
Select… Grandparent Aunt / Uncle Family friend Neighbor Other parent / guardian Other Required
Required
Step 2 of 5
Select Classes
Choose the classes you’d like to enroll in. Each 6-week session is $230 tuition + $20 lab fee = $250.
📍 El Dorado Hills: 1007 Manning Dr.  ·  Granite Bay: 9145 Auburn Folsom Rd.  ·  Sessions begin Sept 14, 2026
🌱 Preschool Classes — 1:45–3:00 pm · Mon–Fri · Both Locations
🎓 Afternoon Classes — 4:15–5:30 pm
Location & Notes
Select… El Dorado Hills — 1007 Manning Dr. Granite Bay — 9145 Auburn Folsom Rd. Either / No preference
Step 3 of 5
Health & Release Information
This information helps us keep your child safe during classes.
Allergies & Medical Information
Select… No known allergies Food allergy Environmental allergy Medication allergy Multiple allergies
Select… No Yes — EpiPen Yes — Inhaler Yes — Other medication
Pickup Authorization
Your child will only be released to individuals listed here and the parent/guardian on this form.
Releases & Agreements
⚠ Please agree to both required items to continue.
Step 4 of 5
Payment
Select your payment method. Your spot is reserved once payment is received.
Order Summary
No classes selected
Total Due$0
Payment Method
⚠ Please select a payment method to continue.
Sibling Discount
No Yes — enrolling 2 students Yes — enrolling 3+ students
10% sibling discount applied to the second student’s tuition.
Additional Comments
Step 5 of 5
Review & Submit
Please review your information before submitting.
Registration Summary
⚠ Please check the confirmation box to submit.
You’re Enrolled!
Thank you for registering with Step by Step, Paso a Paso!
You will receive a confirmation email within 24–48 hours with payment instructions and next steps.
Questions?
📧 melissamendoza@stepbystepchildren.com
📍 EDH: 1007 Manning Dr. · GB: 9145 Auburn Folsom Rd.
Classes begin September 14, 2026 · 2026–2027 Academic Year
const sbsClassLabels = { ‘letters-workshop’: ‘Letters (Mon · 1:45–3:00 pm)’, ‘fine-motor’: ‘Fine Motor Skills (Tue · 1:45–3:00 pm)’, ‘numbers-workshop’: ‘Numbers (Wed · 1:45–3:00 pm)’, ‘little-scientist’: ‘Little Scientist (Thu · 1:45–3:00 pm)’, ‘process-art’: ‘SEL Through Process Art (Fri · 1:45–3:00 pm)’, ‘storybook-art’: ‘Storybook Art (Mon · 4:15–5:30 pm · EDH)’, ‘spanish-class’: ‘Spanish Class (Tue · 4:15–5:30 pm · EDH)’, ‘spanish-art’: ‘Spanish Art Class (Wed · 4:15–5:30 pm · EDH)’, ‘lost-in-a-book’: “Let’s Get Lost in a Book (Thu · 4:15–5:30 pm · GB)”, ‘project-impact’: ‘Project Impact (Fri · 4:15–5:30 pm · EDH)’, }; let sbsCurrentStep = 1; function sbsGoTo(step) { if (step > sbsCurrentStep && !sbsValidateStep(sbsCurrentStep)) return; document.getElementById(‘sbs-step-‘ + sbsCurrentStep).classList.remove(‘active’); document.getElementById(‘sbs-ind-‘ + sbsCurrentStep).classList.remove(‘active’); document.getElementById(‘sbs-ind-‘ + sbsCurrentStep).classList.add(‘done’); sbsCurrentStep = step; document.getElementById(‘sbs-step-‘ + step).classList.add(‘active’); document.querySelectorAll(‘.sbs-step-ind’).forEach(function(el, i) { el.classList.remove(‘active’); if (i + 1 === step) el.classList.add(‘active’); }); if (step === 4) sbsUpdateSummary(); if (step === 5) sbsBuildReview(); window.scrollTo({ top: 0, behavior: ‘smooth’ }); } function sbsReq(id) { var el = document.getElementById(id); var wrap = document.getElementById(‘f-‘ + id); var valid = el && el.value.trim() !== ”; if (wrap) wrap.classList.toggle(‘sbs-has-error’, !valid); if (el) el.classList.toggle(‘sbs-error’, !valid); return valid; } function sbsValidateStep(step) { if (step === 1) { var ok = [sbsReq(‘sfirst’), sbsReq(‘slast’), sbsReq(‘sdob’), sbsReq(‘sgrade’), sbsReq(‘pfirst’), sbsReq(‘plast’), sbsReq(‘pemail’), sbsReq(‘pphone’), sbsReq(‘efirst’), sbsReq(‘erel’), sbsReq(‘ephone’)]; var em = document.getElementById(‘pemail’); var emailOk = /^[^s@]+@[^s@]+.[^s@]+$/.test(em.value); if (!emailOk) { em.classList.add(‘sbs-error’); document.getElementById(‘f-pemail’).classList.add(‘sbs-has-error’); } return ok.every(Boolean) && emailOk; } if (step === 2) { var checked = document.querySelectorAll(‘input[name=”classes”]:checked’); var warn = document.getElementById(‘sbs-no-class-warn’); if (checked.length === 0) { warn.style.display = ‘block’; return false; } warn.style.display = ‘none’; return true; } if (step === 3) { var terms = document.getElementById(‘releaseTerms’).checked; var hs = document.getElementById(‘releaseHomeschool’).checked; var err = document.getElementById(‘sbs-release-error’); if (!terms || !hs) { err.style.display = ‘block’; return false; } err.style.display = ‘none’; return true; } if (step === 4) { var pay = document.querySelector(‘input[name=”payMethod”]:checked’); var err = document.getElementById(‘sbs-pay-error’); if (!pay) { err.style.display = ‘block’; return false; } err.style.display = ‘none’; return true; } return true; } function sbsToggleClass(card) { var cb = card.querySelector(‘input[type=”checkbox”]’); setTimeout(function() { card.classList.toggle(‘selected’, cb.checked); sbsUpdateSummary(); }, 0); } function sbsSelectPay(card) { document.querySelectorAll(‘.sbs-pay-card’).forEach(function(c) { c.classList.remove(‘selected’); }); setTimeout(function() { card.classList.add(‘selected’); sbsUpdateSummary(); }, 0); } function sbsUpdateSummary() { var checked = document.querySelectorAll(‘input[name=”classes”]:checked’); var lines = document.getElementById(‘sbs-summary-lines’); var totalEl = document.getElementById(‘sbs-summary-total’); var sib = parseInt(document.getElementById(‘siblingDiscount’) ? document.getElementById(‘siblingDiscount’).value : 0); if (checked.length === 0) { lines.innerHTML = ‘
No classes selected
‘; totalEl.textContent = ‘$0’; return; } var html = ”; var total = 0; checked.forEach(function(cb) { var price = parseInt(cb.dataset.price); total += price; html += ‘
‘ + (sbsClassLabels[cb.value] || cb.value) + ‘$’ + price + ‘
‘; }); if (sib >= 1) { var discount = Math.round(total * 0.1); html += ‘
Sibling Discount (10%)–$’ + discount + ‘
‘; total -= discount; } lines.innerHTML = html; totalEl.textContent = ‘$’ + total.toLocaleString(); } function sbsBuildReview() { var sname = document.getElementById(‘sfirst’).value + ‘ ‘ + document.getElementById(‘slast’).value; var grade = document.getElementById(‘sgrade’).value; var pname = document.getElementById(‘pfirst’).value + ‘ ‘ + document.getElementById(‘plast’).value; var email = document.getElementById(‘pemail’).value; var phone = document.getElementById(‘pphone’).value; var ename = document.getElementById(‘efirst’).value; var ephone = document.getElementById(‘ephone’).value; var pay = document.querySelector(‘input[name=”payMethod”]:checked’); var payLabel = pay ? pay.closest(‘.sbs-pay-card’).querySelector(‘.sbs-pay-label’).textContent : ‘Not selected’; var photo = document.getElementById(‘releasePhoto’).checked ? ‘Yes’ : ‘No’; var checked = document.querySelectorAll(‘input[name=”classes”]:checked’); var classList = Array.from(checked).map(function(cb) { return ‘‘ + (sbsClassLabels[cb.value] || cb.value) + ‘‘; }).join(”); document.getElementById(‘sbs-review-name’).textContent = sname; document.getElementById(‘sbs-review-content’).innerHTML = ‘
‘ + ‘
Student: ‘ + sname + ‘
‘ + ‘
Grade: ‘ + grade + ‘
‘ + ‘
Parent: ‘ + pname + ‘
‘ + ‘
Email: ‘ + email + ‘
‘ + ‘
Phone: ‘ + phone + ‘
‘ + ‘
Emergency Contact: ‘ + ename + ‘ · ‘ + ephone + ‘
‘ + ‘
‘ + ‘
Classes Selected:
‘ + (classList || ‘None’) + ‘
‘ + ‘
Payment Method: ‘ + payLabel + ‘
‘ + ‘
Total Due: ‘ + document.getElementById(‘sbs-summary-total’).textContent + ‘
‘ + ‘
Photo Release: ‘ + photo + ‘
‘; } function sbsSubmitForm() { var confirmCheck = document.getElementById(‘finalConfirm’); var submitErr = document.getElementById(‘sbs-submit-error’); if (!confirmCheck.checked) { submitErr.style.display = ‘block’; return; } submitErr.style.display = ‘none’; var btn = document.getElementById(‘sbs-submit-btn’); var status = document.getElementById(‘sbs-submit-status’); btn.disabled = true; btn.textContent = ‘Submitting…’; status.textContent = ‘Please wait…’; var checked = document.querySelectorAll(‘input[name=”classes”]:checked’); var classValues = Array.from(checked).map(function(cb) { return cb.value; }); var pay = document.querySelector(‘input[name=”payMethod”]:checked’); var total = document.getElementById(‘sbs-summary-total’).textContent; var data = new FormData(); data.append(‘sfirst’, document.getElementById(‘sfirst’).value); data.append(‘slast’, document.getElementById(‘slast’).value); data.append(‘sdob’, document.getElementById(‘sdob’).value); data.append(‘sgrade’, document.getElementById(‘sgrade’).value); data.append(‘sschool’, document.getElementById(‘sschool’).value); data.append(‘pfirst’, document.getElementById(‘pfirst’).value); data.append(‘plast’, document.getElementById(‘plast’).value); data.append(‘pemail’, document.getElementById(‘pemail’).value); data.append(‘pphone’, document.getElementById(‘pphone’).value); data.append(‘paddress’, document.getElementById(‘paddress’).value); data.append(‘pcharter’, document.getElementById(‘pcharter’).value); data.append(‘phear’, document.getElementById(‘phear’).value); data.append(‘efirst’, document.getElementById(‘efirst’).value); data.append(‘erel’, document.getElementById(‘erel’).value); data.append(‘ephone’, document.getElementById(‘ephone’).value); data.append(‘ephone2’, document.getElementById(‘ephone2’).value); data.append(‘allergyType’, document.getElementById(‘allergyType’).value); data.append(‘allergyDesc’, document.getElementById(‘allergyDesc’).value); data.append(‘epipen’, document.getElementById(‘epipen’).value); data.append(‘healthNotes’, document.getElementById(‘healthNotes’).value); data.append(‘pickupAuth’, document.getElementById(‘pickupAuth’).value); data.append(‘releasePhoto’, document.getElementById(‘releasePhoto’).checked ? ‘1’ : ‘0’); data.append(‘releaseActivity’, document.getElementById(‘releaseActivity’).checked ? ‘1’ : ‘0’); classValues.forEach(function(c) { data.append(‘classes[]’, c); }); data.append(‘prefLocPre’, document.getElementById(‘prefLocPre’).value); data.append(‘classNotes’, document.getElementById(‘classNotes’).value); data.append(‘payMethod’, pay ? pay.value : ”); data.append(‘siblingDiscount’,document.getElementById(‘siblingDiscount’).value); data.append(‘siblingName’, document.getElementById(‘siblingName’).value); data.append(‘finalNotes’, document.getElementById(‘finalNotes’).value); data.append(‘orderTotal’, total); data.append(‘website’, document.getElementById(‘website’).value); fetch(‘/enroll-submit.php’, { method: ‘POST’, body: data }) .then(function(r) { return r.json(); }) .then(function(res) { if (res.ok) { document.getElementById(‘sbs-step-5’).classList.remove(‘active’); document.querySelector(‘.sbs-progress’).style.display = ‘none’; document.getElementById(‘sbs-confirmation’).style.display = ‘block’; window.scrollTo({ top: 0, behavior: ‘smooth’ }); } else { status.textContent = res.error || ‘Something went wrong. Please try again.’; btn.disabled = false; btn.textContent = ‘Submit Registration ✦’; } }) .catch(function() { status.textContent = ‘Connection error. Please try again.’; btn.disabled = false; btn.textContent = ‘Submit Registration ✦’; }); }