Oasis City Church · Baptism Class
:root {
--teal:#548C92; --teal-deep:#2D4F52; --sand:#AB9072; --terra:#9F694F;
--teal-pale:#e8f3f4; --teal-mid:#7aadb2; --sand-pale:#f5ede4; --terra-pale:#f5e9e3;
--off-white:#fafaf8; --warm-bg:#f6f2ee; --dark:#1c2e30; --charcoal:#253739;
--body:#2e3f41; --muted:#7a9699; --div:rgba(84,140,146,0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Raleway',sans-serif;background:var(--warm-bg);color:var(--body);min-height:100vh;}
/* HEADER */
header{background:var(--teal-deep);position:sticky;top:0;z-index:60;box-shadow:0 2px 20px rgba(0,0,0,0.25);}
.hi{display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:70px;max-width:1180px;margin:0 auto;}
nav{display:flex;gap:2px;}
nav button{background:none;border:none;color:rgba(255,255,255,0.45);font-family:'Raleway',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;padding:8px 16px;cursor:pointer;border-radius:4px;transition:all .2s;}
nav button:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);}
nav button.active{color:#fff;background:rgba(255,255,255,.13);}
/* HERO */
.hero{background:var(--teal-deep);position:relative;overflow:hidden;padding:68px 40px 88px;text-align:center;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 110%,rgba(84,140,146,.45) 0%,transparent 65%),radial-gradient(ellipse 40% 40% at 80% 20%,rgba(171,144,114,.1) 0%,transparent 60%);}
.hero-wm{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:340px;opacity:.05;pointer-events:none;}
.hero-waves{position:absolute;bottom:0;left:0;right:0;height:80px;overflow:hidden;pointer-events:none;}
.hero-waves svg{width:100%;height:80px;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.65rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--teal-mid);margin-bottom:20px;position:relative;}
.hero-eyebrow::before,.hero-eyebrow::after{content:'';width:28px;height:1px;background:var(--teal-mid);opacity:.6;}
.hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.2rem,9vw,7rem);color:#fff;line-height:.92;letter-spacing:.04em;margin-bottom:22px;position:relative;}
.hero h1 .acc{color:var(--sand);}
.hero-sub{font-family:'Lora',serif;font-style:italic;font-size:1rem;color:rgba(255,255,255,.55);max-width:460px;margin:0 auto 28px;line-height:1.75;position:relative;}
.hero-verse{font-family:'Lora',serif;font-style:italic;font-size:.92rem;color:rgba(255,255,255,.45);position:relative;}
.hero-verse cite{font-style:normal;font-family:'Raleway',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--sand);margin-left:8px;text-transform:uppercase;}
/* PROGRESS */
.ps{background:var(--charcoal);border-bottom:1px solid rgba(84,140,146,.2);}
.pi{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:14px 40px;}
.pl{color:rgba(255,255,255,.4);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;min-width:120px;}
.pt{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;}
.pf{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-mid));border-radius:2px;width:33%;transition:width .9s cubic-bezier(.4,0,.2,1);}
.pp{color:#fff;font-size:.8rem;font-weight:700;min-width:36px;text-align:right;}
/* MAIN */
main{max-width:1180px;margin:0 auto;padding:52px 24px 90px;}
.page{display:none;}.page.active{display:block;animation:rise .38s ease;}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.sec-t{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;letter-spacing:.06em;color:var(--teal-deep);margin-bottom:6px;}
.sec-s{color:var(--muted);font-size:.88rem;font-weight:500;line-height:1.7;margin-bottom:36px;max-width:580px;}
/* LESSON CARDS */
.lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-bottom:36px;}
.lc{background:#fff;border-radius:12px;padding:28px 28px 24px;border:1.5px solid var(--div);cursor:pointer;position:relative;overflow:hidden;transition:all .28s;}
.lc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--div);transition:background .3s;}
.lc.done::before{background:linear-gradient(90deg,var(--teal-deep),var(--teal));}
.lc.curr::before{background:linear-gradient(90deg,var(--sand),var(--terra));}
.lc.lock{opacity:.5;cursor:not-allowed;}
.lc:not(.lock):hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(45,79,82,.14);border-color:rgba(84,140,146,.4);}
.ln{font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.ld{width:7px;height:7px;border-radius:50%;background:#e0e0e0;flex-shrink:0;}
.done .ld{background:var(--teal);}
.curr .ld{background:var(--terra);box-shadow:0 0 7px rgba(159,105,79,.55);}
.lc h3{font-family:'Bebas Neue',sans-serif;font-size:1.55rem;letter-spacing:.04em;color:var(--teal-deep);margin-bottom:9px;line-height:1.1;}
.lc p{font-size:.83rem;color:var(--muted);line-height:1.7;margin-bottom:18px;}
.lf{display:flex;align-items:center;justify-content:space-between;font-size:.74rem;color:var(--muted);font-weight:600;}
.chip{display:inline-block;padding:3px 11px;border-radius:20px;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.cd{background:rgba(45,79,82,.1);color:var(--teal-deep);}
.cc{background:rgba(159,105,79,.12);color:var(--terra);}
.cl{background:rgba(171,144,114,.15);color:var(--sand);}
/* BANNER */
.bn{background:var(--teal-deep);border-radius:14px;padding:28px 32px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;border:1px solid rgba(84,140,146,.3);}
.bn strong{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.06em;color:#fff;display:block;margin-bottom:5px;}
.bn span{font-size:.83rem;color:rgba(255,255,255,.55);line-height:1.65;}
.bn-txt{flex:1;}
/* LESSON DETAIL */
.lv{display:none;}.lv.open{display:block;animation:rise .38s ease;}
.back{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;margin-bottom:28px;transition:color .2s;}
.back:hover{color:var(--teal-deep);}.back::before{content:'←';font-size:1rem;}
.lhdr{background:#fff;border-radius:14px;padding:36px;border:1.5px solid var(--div);margin-bottom:20px;border-top:4px solid var(--teal);}
.lhdr-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;flex-wrap:wrap;gap:10px;}
.lhdr h2{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:.05em;color:var(--teal-deep);}
.lhdr p{font-size:.82rem;color:var(--muted);font-weight:600;letter-spacing:.05em;}
.cc2{background:#fff;border-radius:14px;padding:32px;border:1.5px solid var(--div);margin-bottom:18px;}
.cc2 h4{font-family:'Raleway',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--teal-pale);}
.cc2 p{font-size:.9rem;color:#374b4d;line-height:1.85;margin-bottom:14px;}
.cc2 p:last-child{margin-bottom:0;}
.vb{background:var(--teal-pale);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;padding:20px 24px;margin:18px 0;}
.vb blockquote{font-family:'Lora',serif;font-style:italic;font-size:1rem;color:var(--teal-deep);line-height:1.75;margin-bottom:8px;}
.vr{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-family:'Raleway',sans-serif;}
.ql{font-size:.88rem;font-weight:600;color:var(--teal-deep);margin-bottom:14px;}
.qo{display:flex;flex-direction:column;gap:9px;}
.qop{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:9px;border:1.5px solid #e8e8e8;cursor:pointer;font-size:.86rem;color:var(--body);background:var(--warm-bg);transition:all .2s;font-weight:500;}
.qop:hover{border-color:var(--teal);background:var(--teal-pale);}
.qop.correct{border-color:var(--teal-deep);background:rgba(45,79,82,.08);color:var(--teal-deep);}
.qop.wrong{border-color:var(--terra);background:var(--terra-pale);color:var(--terra);}
.qc{width:23px;height:23px;border-radius:50%;border:2px solid #ccc;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;transition:all .2s;}
.correct .qc{border-color:var(--teal-deep);background:var(--teal-deep);color:#fff;}
.wrong .qc{border-color:var(--terra);background:var(--terra);color:#fff;}
.qfb{margin-top:13px;padding:12px 16px;border-radius:8px;font-size:.83rem;display:none;font-weight:500;line-height:1.55;}
.qfb.show{display:block;}.qfb.good{background:rgba(45,79,82,.09);color:var(--teal-deep);}.qfb.bad{background:var(--terra-pale);color:var(--terra);}
.la{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid #efefef;flex-wrap:wrap;gap:12px;}
.la p{font-size:.8rem;color:var(--muted);font-weight:500;}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:7px;font-family:'Raleway',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:none;transition:all .22s;}
.bt{background:var(--teal-deep);color:#fff;}.bt:hover{background:var(--teal);transform:translateY(-1px);box-shadow:0 6px 20px rgba(45,79,82,.28);}
.bs{background:var(--sand);color:#fff;}.bs:hover{background:#c4a987;transform:translateY(-1px);}
.bo{background:transparent;color:var(--teal-deep);border:2px solid var(--teal-deep);}.bo:hover{background:var(--teal-deep);color:#fff;}
.bg{background:transparent;color:var(--muted);border:2px solid #e0e0e0;}.bg:hover{border-color:var(--teal);color:var(--teal);}
/* SCHEDULE */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media(max-width:740px){.sg{grid-template-columns:1fr;}}
.card{background:#fff;border-radius:14px;padding:30px;border:1.5px solid var(--div);}
.card h3{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.05em;color:var(--teal-deep);margin-bottom:4px;}
.cs{font-size:.8rem;color:var(--muted);font-weight:500;margin-bottom:22px;}
.tr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.to{padding:16px 10px;border-radius:10px;border:2px solid #eaeaea;cursor:pointer;text-align:center;transition:all .2s;background:var(--warm-bg);}
.to:hover{border-color:var(--teal);}.to.sel{border-color:var(--teal-deep);background:var(--teal-pale);}
.ti{font-size:1.35rem;margin-bottom:5px;}.tl{font-size:.8rem;font-weight:800;color:var(--teal-deep);letter-spacing:.06em;}.ts{font-size:.68rem;color:var(--muted);margin-top:2px;font-weight:500;}
label.lb{display:block;font-size:.67rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.fr{margin-bottom:14px;}
.fi,.fse,.ft{width:100%;padding:11px 14px;border-radius:8px;border:1.5px solid #e0e0e0;background:var(--warm-bg);font-family:'Raleway',sans-serif;font-size:.88rem;color:var(--body);outline:none;font-weight:500;transition:border-color .2s;}
.fi:focus,.fse:focus,.ft:focus{border-color:var(--teal);background:#fff;}
.ft{resize:vertical;min-height:85px;}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.slot{padding:9px 5px;text-align:center;border-radius:7px;border:1.5px solid #eaeaea;font-size:.73rem;color:var(--muted);cursor:pointer;transition:all .18s;background:var(--warm-bg);font-weight:600;}
.slot:hover{border-color:var(--teal);color:var(--teal-deep);}
.slot.sel{border-color:var(--teal-deep);background:var(--teal-pale);color:var(--teal-deep);}
.slot.na{opacity:.3;cursor:not-allowed;}
.mt{display:flex;align-items:center;gap:14px;padding:14px;border-radius:10px;background:var(--teal-pale);border:1px solid var(--div);margin-bottom:10px;}
.md{width:50px;text-align:center;flex-shrink:0;background:var(--teal-deep);color:#fff;border-radius:8px;padding:7px 4px;}
.mm{font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-mid);}
.dy{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;line-height:1;letter-spacing:.05em;}
.mi{flex:1;}.mi strong{font-size:.88rem;font-weight:700;color:var(--teal-deep);display:block;margin-bottom:2px;}.mi span{font-size:.76rem;color:var(--muted);font-weight:500;}
.badge{padding:4px 10px;border-radius:20px;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.bv{background:rgba(45,79,82,.12);color:var(--teal-deep);}
/* RESOURCES */
.rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
.rc{background:#fff;border-radius:12px;padding:24px;border:1.5px solid var(--div);cursor:pointer;transition:all .25s;}
.rc:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(45,79,82,.12);border-color:rgba(84,140,146,.4);}
.ri{font-size:1.7rem;margin-bottom:12px;}
.rc h4{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.05em;color:var(--teal-deep);margin-bottom:7px;}
.rc p{font-size:.8rem;color:var(--muted);line-height:1.65;font-weight:500;}
/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(28,46,48,.78);z-index:200;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.modal{background:#fff;border-radius:18px;padding:50px 40px;max-width:420px;width:90%;text-align:center;animation:pop .32s cubic-bezier(.175,.885,.32,1.275);border-top:5px solid var(--teal);}
@keyframes pop{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}
.modal .mi2{font-size:2.8rem;margin-bottom:14px;}
.modal h3{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.05em;color:var(--teal-deep);margin-bottom:10px;}
.modal p{font-size:.87rem;color:var(--muted);line-height:1.72;margin-bottom:28px;font-weight:500;}
/* TOAST */
.toast{position:fixed;bottom:28px;right:28px;background:var(--teal-deep);color:#fff;padding:13px 22px;border-radius:10px;font-size:.82rem;font-weight:700;letter-spacing:.06em;box-shadow:0 8px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px;z-index:300;transform:translateY(80px);opacity:0;transition:all .38s cubic-bezier(.175,.885,.32,1.275);}
.toast.show{transform:translateY(0);opacity:1;}
/* FOOTER */
footer{background:var(--dark);padding:28px 40px;text-align:center;}
.fi2{max-width:1180px;margin:0 auto;}
footer p{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-top:12px;}
footer em{color:rgba(84,140,146,.7);font-style:normal;}
hr.dv{border:none;border-top:1px solid rgba(171,144,114,.22);margin:32px 0;}
@media(max-width:640px){.hi{padding:0 18px;height:62px;}.hero{padding:44px 18px 68px;}main{padding:30px 14px 60px;}.lg{grid-template-columns:1fr;}nav button{padding:6px 10px;font-size:.65rem;}.pi{padding:12px 18px;}}
.wi{fill:#fff;}
Baptism Class · Self-Paced
Born of
Water
& Spirit
A guided preparation for baptism by immersion — rooted in Scripture and shaped by the beliefs of Oasis City Church.
"Repent and be baptized, every one of you, in the name of Jesus Christ for the forgiveness of your sins. And you will receive the gift of the Holy Spirit." Acts 2:38
Course Lessons
Work through each lesson at your own pace. A pastor check-in is required after Lesson 3 and again before your baptism day.
Lesson 1 · Complete
The One True God
Discover the nature of the Triune God — Father, Son, and Holy Spirit — one in nature, essence, and power. The foundation of your baptism.
churchtrac