/* =============================================== GRACE BOLOWANA EDU — MAIN STYLESHEET style.css SECTIONS IN THIS FILE: 1. Google Font Import (Poppins) 2. Global Reset 3. Body & Base 4. Navbar 5. Headers (Home, Books, Stories, Learn, Contact) 6. Hero Section (Homepage) 7. Home Books Section (3 book cards on homepage) 8. Books Page (full books grid) 9. Stories Page 10. Learn With Me Page 11. Download Button (used on Books + Learn pages) 12. Contact Page 13. About Me Section (Homepage) 14. Testimonials Section (Homepage) 15. About Section / Pink Banner (Homepage) 16. Footer 17. Info Bot (floating chat bubble) 18. Scroll Fade-In Animation 19. Mobile Responsive (max-width: 768px) =============================================== */ /* ================= 1. GOOGLE FONT ================= */ /* Poppins is imported here — this is your site font */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); /* ================= 2. GLOBAL RESET ================= */ /* Removes default browser spacing from everything */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ================= 3. BODY & BASE ================= */ /* Sets Poppins as the font for the whole site */ /* Each page has its own light background color set via a class on */ body { font-family: 'Poppins', sans-serif; background-color: #ffffff; } /* Homepage — soft warm white */ body.page-home { background-color: #fff9f0; } /* Books page — soft mint green */ body.page-books { background-color: #c9ffd2; } /* Stories page — soft lavender */ body.page-stories { background-color: #f9d1fe; } /* Learn With Me page — soft sky blue */ body.page-learn { background-color: #e5f3ff; } /* Contact page — soft pink */ body.page-contact { background-color: #ffe2f9; } /* ================= 4. NAVBAR ================= */ /* Shared navbar used on every single page */ /* FIX: height is set to 120px here so it fills every header the same way */ /* Previously, home-header had its own display:flex which made it look different */ .navbar { display: flex; align-items: center; padding: 0 60px; height: 120px; /* matches ALL header heights — navbar now looks identical on every page */ width: 100%; } /* Brand = logo image + site name stacked vertically */ .brand { display: flex; flex-direction: column; } .logo img { width: 42px; } .brand-name { font-size: 14px; color: white; margin-top: 2px; letter-spacing: 1px; } /* Nav links sit on the right side of the navbar */ /* FIX: switched from margin-left: 22px to gap: 40px — more space, easier to read */ .nav-links { display: flex; list-style: none; margin-left: auto; gap: 40px; /* was 22px margin — now links have proper breathing room */ } .nav-links li a { text-decoration: none; color: white; font-size: 13px; font-weight: 500; letter-spacing: 0.5px; position: relative; } /* White underline slides in on hover */ .nav-links li a::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 0%; height: 2px; background-color: white; transition: 0.3s ease; } .nav-links li a:hover::after { width: 100%; } /* Hamburger menu button — shown only on mobile */ .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; margin-left: auto; padding: 4px; } .menu-toggle span { display: block; width: 24px; height: 2px; background-color: white; border-radius: 2px; transition: 0.3s ease; } /* ================= 5. HEADERS ================= */ /* FIX: home-header no longer has display:flex or align-items on it */ /* That was making the home navbar behave differently from all other pages */ /* All layout is now handled by .navbar inside each header — consistent everywhere */ .header { width: 100%; } /* Homepage header — fixed so it stays visible while scrolling */ .home-header { height: 120px; background-color: #fe468d; width: 100%; position: fixed; top: 0; z-index: 10; } /* All other page headers — same height and color, just not fixed */ .books-header { background-color: #fe468d; height: 120px; width: 100%; } .stories-header { background-color: #fe468d; height: 120px; width: 100%; } .learn-header { background-color: #fe468d; height: 120px; width: 100%; } .contact-header { background-color: #fe468d; height: 120px; width: 100%; } /* ================= 6. HERO SECTION (Homepage) ================= */ /* The big full-screen image section at the top of the homepage */ /* Pushes hero down so content doesn't hide under the fixed header */ .home-hero { margin-top: 120px; } .hero-image { position: relative; height: 90vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; } /* Dark overlay so white text is readable over the background photo */ .hero-image .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); } /* Text sits above the overlay */ .hero-text { position: relative; z-index: 2; color: white; } .hero-text h1 { font-size: 48px; font-weight: 700; margin-bottom: 20px; } /* ================= 7. HOME BOOKS SECTION (Homepage only) ================= */ /* Shows 3 featured book cards on the homepage */ /* Full books grid is on books.html */ .home-books-section { padding: 60px 20px; background-color: #ffffff; text-align: center; } .home-books-section h2 { font-size: 2rem; color: #333; margin-bottom: 10px; } .home-books-section .section-sub { font-size: 1rem; color: #888; margin-bottom: 40px; } /* Flex container that wraps the 3 cards */ .books-grid-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; max-width: 1200px; margin: 0 auto; } /* Book card on homepage — is an tag so has no underline */ .books-grid-container .book-card { width: 240px; background: white; border-radius: 16px; padding: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease; } .books-grid-container .book-card:hover { transform: translateY(-8px); } /* Full book cover — not cropped */ .book-cover-img { width: 100%; height: 300px; object-fit: contain; background-color: #ffffff; border-radius: 10px; margin-bottom: 15px; } .books-grid-container .book-card h3 { font-size: 1.1rem; margin: 10px 0 5px; color: #333; } .books-grid-container .book-card p { font-size: 0.9rem; color: #666; } /* "See All Books →" button below the 3 cards */ .books-cta { margin-top: 40px; } .books-cta a { display: inline-block; padding: 12px 28px; background-color: #fe468d; color: white; font-size: 1rem; font-weight: 600; border-radius: 12px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .books-cta a:hover { background-color: #ff72b1; transform: scale(1.05); } /* Pink divider line below the books section */ .section-divider { border: none; height: 2px; background-color: #fe468d; margin: 50px auto 0; width: 80%; } /* ================= 8. BOOKS PAGE (books.html) ================= */ /* Full grid of all 5 books */ .books-section { padding: 60px 20px; max-width: 1200px; margin: 0 auto; background: rgb(206, 255, 214); text-align: center; } .books-title { font-size: 36px; text-align: center; margin-bottom: 10px; } .books-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; } /* Book card used on books.html */ .book-card { width: 240px; background: rgb(189, 252, 196); border-radius: 16px; padding: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; display: flex; flex-direction: column; align-items: center; } .book-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); } /* Book cover image on books.html */ .book-img { width: 100%; height: 300px; object-fit: contain; background-color: #bbffba; border-radius: 10px; margin-bottom: 15px; } .book-card h3 { font-size: 18px; margin-bottom: 6px; } .book-card p { font-size: 14px; color: #555; margin-bottom: 15px; } /* "Coming Soon" italic label */ .coming-soon { display: inline-block; margin-top: 12px; font-size: 13px; color: #777; font-style: italic; } /* ================= 9. STORIES PAGE (stories.html) ================= */ .stories-section { padding: 30px 60px; max-width: 1100px; margin: 0 auto; } .stories-title { font-size: 36px; text-align: center; margin-bottom: 30px; } /* Responsive grid — cards stack on smaller screens automatically */ .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } /* Story card — lavender to match page background */ .video-card { background: rgb(225, 172, 248); border-radius: 14px; padding: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); text-align: center; } /* Placeholder video thumbnail — replace with real img/iframe when ready */ .video-thumb { height: 180px; border-radius: 12px; background: #f2c8fc; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 40px; color: #777; } .video-card h3 { font-size: 18px; margin-bottom: 4px; } .video-card p { font-size: 13px; color: #555; } /* ================= 10. LEARN WITH ME PAGE (learn.html) ================= */ .learn-section { padding: 30px 60px; max-width: 1100px; margin: 0 auto; } .learn-title { font-size: 36px; text-align: center; margin-bottom: 30px; color: #333; } /* Responsive card grid */ .learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; } /* Activity card — soft blue */ .learn-card { background: #c8d9f2; border-radius: 16px; padding: 26px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); text-align: center; transition: transform 0.2s ease; } .learn-card:hover { transform: translateY(-5px); } /* Big emoji icon — replace with real images when worksheets are ready */ .learn-thumb { font-size: 50px; margin-bottom: 12px; } .learn-card h3 { font-size: 20px; margin-bottom: 8px; } .learn-card p { font-size: 14px; color: #555; } /* "Coming Soon" italic label on learn cards */ .learn-status { display: inline-block; margin-top: 14px; font-size: 13px; color: #888; font-style: italic; } /* ================= 11. DOWNLOAD BUTTON ================= */ /* Used on Books page and Learn With Me page */ /* Dark text (#333) because yellow background makes white unreadable */ .download-btn { display: inline-block; margin-top: 12px; padding: 8px 16px; background-color: #fee546; color: #333; font-size: 14px; font-weight: 500; border-radius: 12px; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease; } .download-btn:hover { background-color: #ff72b1; color: white; transform: scale(1.05); } /* ================= 12. CONTACT PAGE (contact.html) ================= */ .contact-section { max-width: 700px; margin: 50px auto; padding: 0 20px; } .contact-title { text-align: center; font-size: 36px; margin-bottom: 30px; color: #333; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .contact-form label { font-size: 14px; font-weight: 500; color: #555; } .contact-form input, .contact-form textarea { padding: 12px 16px; border-radius: 12px; border: 1px solid #ddd; font-size: 14px; font-family: 'Poppins', sans-serif; width: 100%; resize: none; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #fe468d; box-shadow: 0 0 5px rgba(254, 70, 141, 0.3); } .submit-btn { padding: 12px 20px; background-color: #fe468d; color: white; font-size: 16px; font-weight: 500; font-family: 'Poppins', sans-serif; border: none; border-radius: 14px; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .submit-btn:hover { background-color: #ff72b1; transform: scale(1.05); } /* ================= 13. ABOUT ME SECTION (Homepage) ================= */ /* Side-by-side text + photo — text left, photo right */ /* Light blue background as requested */ #about-me-section { padding: 60px 20px; background-color: #d0eeff; } .about-me-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 50px; flex-wrap: wrap; } .about-me-text { flex: 1; min-width: 280px; } .about-me-text h2 { font-size: 1.8rem; color: #fe468d; margin-bottom: 16px; } .about-me-text p { font-size: 1.1rem; line-height: 1.8; color: #333; } .about-me-img { flex: 1; min-width: 280px; text-align: right; } .about-me-img img { width: 80%; max-width: 400px; height: auto; border-radius: 10px; } /* ================= 14. TESTIMONIALS SECTION (Homepage) ================= */ /* Real testimonials from people Grace knows — no stars */ .testimonials-section { padding: 60px 20px; text-align: center; background: rgb(244, 246, 208); } .testimonial-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 30px; } .testimonial-card { background: #ffffff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07); max-width: 300px; font-style: italic; color: #555; text-align: left; } .testimonial-card h4 { margin-top: 14px; font-style: normal; color: #fe468d; font-size: 0.95rem; } /* ================= 15. ABOUT / PINK BANNER (Homepage) ================= */ /* Pink "About Grace Bolowana Edu" section near the bottom */ .home-about-section { padding: 80px 20px; background-color: #fe468d; color: rgb(255, 255, 255); text-align: center; } .about-content-wrapper { max-width: 800px; margin: 0 auto; } .home-about-section h2 { font-size: 2.5rem; margin-bottom: 20px; } .home-about-section p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 15px; } /* ================= 16. FOOTER ================= */ /* Shared footer across all pages */ footer { background-color: #383f43; color: white; text-align: center; padding: 30px; font-size: 14px; } footer .footer-links { margin-top: 10px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } footer .footer-links a { color: #fe468d; text-decoration: none; font-size: 13px; transition: color 0.2s; } footer .footer-links a:hover { color: #ff72b1; } /* ================= 17. INFO BOT ================= */ /* Floating blue chat bubble — bottom-right corner of homepage */ .info-bot { position: fixed; bottom: 24px; right: 24px; z-index: 999; } /* Round blue button with 💬 emoji */ .bot-button { width: 56px; height: 56px; border-radius: 50%; background-color: #3b82f6; color: white; font-size: 22px; border: none; cursor: pointer; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; } .bot-button:hover { transform: scale(1.08); } /* Popup box above the button */ .bot-popup { position: absolute; bottom: 70px; right: 0; width: 300px; max-height: 480px; overflow-y: auto; background: white; border-radius: 16px; padding: 20px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); display: none; /* toggled open by JS */ } /* Pink header bar inside the popup */ .bot-popup h3 { font-size: 16px; color: #ffffff; background-color: #fe468d; margin: -20px -20px 14px -20px; padding: 14px 20px; border-radius: 16px 16px 0 0; } .bot-popup p { font-size: 14px; line-height: 1.7; color: #444; margin-bottom: 10px; } .close-bot { background: none; border: none; color: #3b82f6; font-size: 14px; cursor: pointer; font-weight: 500; } /* ================= 18. SCROLL FADE-IN ANIMATION ================= */ /* Sections start invisible and slide up as you scroll to them */ /* JS adds .is-visible when the section enters the viewport */ .fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform; } .fade-in-section.is-visible { opacity: 1; transform: none; } /* ================= 19. MOBILE RESPONSIVE ================= */ /* Screens smaller than 768px — phones and small tablets */ @media (max-width: 768px) { /* Tighter navbar padding, same height */ .navbar { padding: 0 20px; height: 120px; } /* Smaller hero heading */ .hero-text h1 { font-size: 32px; } /* Show hamburger, hide full nav */ .menu-toggle { display: flex; } /* Nav hidden by default on mobile — JS adds .show to open it */ .nav-links { display: none; flex-direction: column; position: absolute; top: 120px; left: 0; width: 100%; background-color: #fe468d; padding: 20px; gap: 16px; z-index: 100; } .nav-links.show { display: flex; } /* Reduce padding on stories/learn sections */ .stories-section, .learn-section { padding: 30px 20px; } /* Stack about-me layout vertically */ .about-me-inner { flex-direction: column; } .about-me-img { text-align: center; } .about-me-img img { width: 100%; } /* Stack book cards vertically */ .books-grid-container, .books-grid { flex-direction: column; align-items: center; } }