/* * ============================================================ * ROOT ENGLISH MEDIUM SCHOOL — Main Stylesheet * style.css * * School : Root English Medium School, Hubli * Address : H.No.14, Pawaskar Layout, Manjunath Nagar, * Gokul Road, Hubli – 580030 (Behind KLE School) * Phone : +91 98765 43210 * Est. : 2016 | 9 Years of Nurturing Young Minds * * CDN Dependencies (link in before this file): * - Bootstrap 5.3.3 * - Bootstrap Icons 1.11.3 * - AOS 2.3.4 * - Google Fonts: Fredoka One, Nunito, Quicksand * * Colour Palette: * --maroon : #7b1a3a (primary brand) * --maroon-dk : #560f28 (dark shade) * --yellow : #f59e0b (accent / CTA) * --green : #16a34a (LKG / success) * --red : #dc2626 (Play School) * --purple : #7c3aed (UKG) * --blue : #1e3a8a (links / badges) * * Table of Contents: * 1. CSS Variables * 2. Base Reset & Global * 3. Topbar / Marquee * 4. Header & Navigation * 5. Mobile Navigation * 6. Scroll-to-Top Button * 7. Section Utilities (labels, titles, descriptions) * 8. Hero Section (Homepage) * 9. About Section * 10. Stats / Counter Section * 11. Founder Section * 12. Why Us Section * 13. Programs / Class Cards * 14. Gallery Grid * 15. Events (teaser + full page) * 16. Testimonials Section * 17. Admission CTA Section * 18. Class Page Hero * 19. Teacher Card (class pages) * 20. Curriculum Highlight Cards * 21. Photo Gallery (upload + lightbox) * 22. Enroll Strip (class pages) * 23. Events Full Page (events.html) * 24. Footer * 25. Responsive Overrides * ============================================================ */ /* ============================================================ 1. CSS VARIABLES ============================================================ */ :root { --maroon : #7b1a3a; --maroon-dk : #560f28; --maroon-lt : #fdf2f5; --blue : #1e3a8a; --blue-mid : #2563eb; --blue-lt : #eff6ff; --yellow : #f59e0b; --yellow-lt : #fef3c7; --green : #16a34a; --green-lt : #f0fdf4; --red : #dc2626; --red-lt : #fef2f2; --purple : #7c3aed; --purple-lt : #f5f3ff; --orange : #f97316; --dark : #1e293b; --text : #334155; --muted : #64748b; --border : #e2e8f0; --white : #ffffff; --soft : #f8faff; } /* ============================================================ 2. BASE RESET & GLOBAL ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Nunito', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: 'Fredoka One', cursive; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-thumb { background: var(--maroon); border-radius: 3px; } /* Dot pattern background utility */ .dotbg { background-image: radial-gradient(circle, rgba(123,26,58,.1) 1px, transparent 1px); background-size: 26px 26px; } /* General section padding */ section { padding: 68px 0; } /* ============================================================ 3. TOPBAR / MARQUEE ============================================================ */ .topbar { background: var(--maroon-dk); padding: 7px 0; overflow: hidden; } .marquee-wrap { overflow: hidden; } .marquee-inner { display: flex; gap: 50px; animation: marqueeScroll 30s linear infinite; white-space: nowrap; font-size: .73rem; font-weight: 600; color: rgba(255,255,255,.85); } .marquee-inner span { display: flex; align-items: center; gap: 6px; } .marquee-inner i { color: var(--yellow); } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ============================================================ 4. HEADER & NAVIGATION ============================================================ */ #hdr { background: rgba(255,255,255,.97); backdrop-filter: blur(14px); box-shadow: 0 2px 18px rgba(0,0,0,.07); position: sticky; top: 0; z-index: 9997; transition: box-shadow .3s; } .hdr-inner { display: flex; align-items: center; padding: 9px 0; gap: 12px; } /* Logo */ .logo-wrap { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .logo-wrap img.limg { width: 58px; height: 58px; object-fit: contain; } .sname { font-family: 'Fredoka One', cursive; font-size: 1.05rem; color: var(--maroon-dk); line-height: 1.1; } .ssub { font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); } .smotto { font-size: .55rem; color: var(--muted); font-style: italic; } /* Nav links */ nav#nav ul { list-style: none; display: flex; align-items: center; gap: 1px; margin: 0; padding: 0; } nav#nav ul li a { font-family: 'Quicksand', sans-serif; font-size: .8rem; font-weight: 700; color: var(--dark); padding: 7px 10px; border-radius: 8px; transition: .2s; display: block; } nav#nav ul li a:hover, nav#nav ul li a.on { color: var(--maroon); background: var(--maroon-lt); } /* Enroll button */ .btn-apply { background: linear-gradient(135deg, var(--maroon), var(--maroon-dk)); color: #fff !important; padding: 8px 18px; border-radius: 50px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .78rem; white-space: nowrap; box-shadow: 0 4px 12px rgba(123,26,58,.3); transition: .3s; } .btn-apply:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(123,26,58,.45); } /* Mobile toggle button */ .mbtn { display: none; font-size: 1.35rem; color: var(--dark); cursor: pointer; background: none; border: none; } /* Dropdown */ nav#nav ul li.drop { position: relative; } nav#nav ul li.drop > ul { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border-radius: 12px; box-shadow: 0 10px 36px rgba(0,0,0,.11); padding: 7px; min-width: 185px; flex-direction: column; z-index: 9999; border: 1px solid var(--border); } nav#nav ul li.drop:hover > ul { display: flex; } /* ============================================================ 5. MOBILE NAVIGATION ============================================================ */ @media (max-width: 1199px) { .mbtn { display: block; } nav#nav { display: none; position: fixed; top: 79px; left: 0; right: 0; background: #fff; padding: 14px 18px 20px; box-shadow: 0 10px 28px rgba(0,0,0,.1); z-index: 9996; border-radius: 0 0 18px 18px; } nav#nav.open { display: block; } nav#nav ul { flex-direction: column; align-items: stretch; } nav#nav ul li.drop > ul { position: static; box-shadow: none; border: none; padding-left: 10px; } nav#nav ul li.drop:hover > ul { display: none; } nav#nav ul li.drop > ul.open { display: flex; } } /* ============================================================ 6. SCROLL-TO-TOP BUTTON ============================================================ */ #stb { position: fixed; right: 18px; bottom: 18px; width: 40px; height: 40px; background: var(--maroon); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; box-shadow: 0 4px 14px rgba(123,26,58,.4); z-index: 9998; opacity: 0; pointer-events: none; transition: .3s; } #stb.on { opacity: 1; pointer-events: all; } #stb:hover { transform: translateY(-3px); } /* ============================================================ 7. SECTION UTILITIES ============================================================ */ .slabel { display: inline-block; font-family: 'Quicksand', sans-serif; font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); background: var(--maroon-lt); padding: 4px 12px; border-radius: 50px; margin-bottom: 9px; } .stitle { font-family: 'Fredoka One', cursive; font-size: clamp(1.65rem, 2.8vw, 2.45rem); color: var(--dark); margin-bottom: 9px; } .stitle span { color: var(--maroon); } .sdesc { font-size: .9rem; color: var(--muted); max-width: 530px; margin: 0 auto; line-height: 1.75; } .sec-hd { text-align: center; padding-bottom: 40px; } /* ============================================================ 8. HERO SECTION (index.html) ============================================================ */ #hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } #hero .hbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(.38); } #hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(86,15,40,.88) 0%, rgba(123,26,58,.52) 55%, rgba(30,58,138,.28) 100%); z-index: 1; } #hero .container { position: relative; z-index: 2; } .h-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); border-radius: 50px; padding: 6px 16px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; } #hero h1 { font-size: clamp(2.1rem, 5.2vw, 4.3rem); color: #fff; line-height: 1.1; margin-bottom: 14px; } #hero h1 span { color: var(--yellow); } .h-desc { font-size: .98rem; color: rgba(255,255,255,.78); max-width: 510px; line-height: 1.8; margin-bottom: 26px; } /* Class pill buttons in hero */ .cpills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .cpill { display: flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 50px; font-size: .78rem; font-weight: 700; font-family: 'Quicksand', sans-serif; backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.22); color: #fff; transition: .3s; } .cpill:hover { transform: translateY(-3px); color: #fff; } .cpill.ps { background: rgba(220,38,38,.32); } .cpill.nr { background: rgba(245,158,11,.32); } .cpill.lk { background: rgba(22,163,74,.32); } .cpill.uk { background: rgba(124,58,237,.32); } /* Hero buttons */ .hbtns { display: flex; gap: 11px; flex-wrap: wrap; } .hbtn1 { background: linear-gradient(135deg, var(--yellow), #d97706); color: var(--dark); padding: 12px 30px; border-radius: 50px; font-family: 'Fredoka One', cursive; font-size: .98rem; transition: .3s; box-shadow: 0 6px 20px rgba(245,158,11,.38); display: inline-block; } .hbtn1:hover { transform: translateY(-3px); color: var(--dark); } .hbtn2 { border: 2px solid rgba(255,255,255,.55); color: #fff; padding: 10px 26px; border-radius: 50px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .9rem; transition: .3s; display: inline-block; } .hbtn2:hover { background: #fff; color: var(--maroon-dk); } /* Hero stats bar */ .statsbar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; background: rgba(255,255,255,.08); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.11); padding: 15px 0; } .hsnum { font-family: 'Fredoka One', cursive; font-size: 1.65rem; color: var(--yellow); line-height: 1; } .hslbl { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); } /* Scroll hint animation */ .scrollhint { position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%); z-index: 3; animation: bounceHint 2s infinite; } .scrollhint span { display: block; width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.38); border-radius: 11px; position: relative; } .scrollhint span::before { content: ''; width: 4px; height: 4px; background: var(--yellow); border-radius: 50%; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); animation: scrollDot 2s infinite; } @keyframes bounceHint { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } @keyframes scrollDot { 0% { opacity: 1; top: 5px; } 100% { opacity: 0; top: 19px; } } /* ============================================================ 9. ABOUT SECTION ============================================================ */ .aimg { border-radius: 20px; width: 100%; height: 420px; object-fit: cover; box-shadow: 0 12px 40px rgba(123,26,58,.14); } .abadge { position: absolute; bottom: -2px; right: -12px; background: linear-gradient(135deg, var(--yellow), #d97706); color: var(--dark); border-radius: 14px; padding: 16px 18px; text-align: center; box-shadow: 0 7px 22px rgba(245,158,11,.33); } .abadge .n { font-family: 'Fredoka One', cursive; font-size: 2rem; line-height: 1; } .abadge .l { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Floating emoji stickers */ .stk { position: absolute; font-size: 1.7rem; background: #fff; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.1); } .stk.s1 { top: 12px; left: -12px; animation: floatSticker 3s ease-in-out infinite; } .stk.s2 { top: 42%; right: -14px; animation: floatSticker 3s ease-in-out .8s infinite; } @keyframes floatSticker { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .aitl { font-size: .9rem; color: var(--maroon); font-weight: 600; font-style: italic; border-left: 3px solid var(--yellow); padding-left: 13px; line-height: 1.7; margin-bottom: 18px; } .alist { list-style: none; padding: 0; margin-bottom: 22px; } .alist li { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .88rem; } .alist li:last-child { border-bottom: none; } .alist li i { color: var(--green); font-size: .95rem; margin-top: 3px; flex-shrink: 0; } /* ============================================================ 10. STATS / COUNTER SECTION ============================================================ */ #stats { background: linear-gradient(135deg, var(--maroon-dk), var(--maroon)); padding: 52px 0; } .sc { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.11); border-radius: 16px; padding: 30px 14px; text-align: center; transition: .3s; } .sc:hover { background: rgba(255,255,255,.14); transform: translateY(-5px); } .sc .ico { font-size: 1.9rem; display: block; margin-bottom: 10px; } .sc .sn { font-family: 'Fredoka One', cursive; font-size: 2.5rem; color: #fff; line-height: 1; display: block; margin-bottom: 4px; } .sc .sl { font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.48); } /* ============================================================ 11. FOUNDER SECTION ============================================================ */ #founder { background: linear-gradient(135deg, #f8f3ff, #fff5f7); } .fcard { background: #fff; border-radius: 22px; padding: 38px; box-shadow: 0 8px 36px rgba(123,26,58,.1); border: 1px solid rgba(123,26,58,.07); position: relative; overflow: hidden; } .fcard::before { content: '"'; position: absolute; top: -14px; right: 22px; font-size: 9rem; color: var(--maroon); opacity: .055; font-family: Georgia, serif; line-height: 1; } .fimg { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--yellow); box-shadow: 0 7px 24px rgba(123,26,58,.14); margin: 0 auto 14px; } .fname { font-family: 'Fredoka One', cursive; font-size: 1.45rem; color: var(--maroon-dk); } .ftitle { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); display: block; margin: 4px 0 10px; } .fquote { font-size: .92rem; color: var(--muted); line-height: 1.8; font-style: italic; border-left: 3px solid var(--yellow); padding-left: 14px; margin: 14px 0; } .ftag { display: inline-flex; align-items: center; gap: 5px; background: var(--maroon-lt); color: var(--maroon); font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: 50px; margin: 3px; } .fmini { background: var(--maroon-lt); border-radius: 11px; padding: 13px 18px; text-align: center; } .fmini-n { font-family: 'Fredoka One', cursive; font-size: 1.45rem; color: var(--maroon); } .fmini-l { font-size: .65rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; } /* ============================================================ 12. WHY US SECTION ============================================================ */ #why { background: var(--soft); } .wmain { background: linear-gradient(135deg, var(--maroon), var(--maroon-dk)); border-radius: 20px; padding: 36px 28px; height: 100%; position: relative; overflow: hidden; } .wmain::before { content: '🌟'; position: absolute; font-size: 7rem; opacity: .055; bottom: -12px; right: -4px; } .wmain h3 { font-family: 'Fredoka One', cursive; font-size: 1.55rem; color: #fff; margin-bottom: 11px; } .wmain p { color: rgba(255,255,255,.7); font-size: .88rem; line-height: 1.8; margin-bottom: 20px; } .wfeat { background: #fff; border-radius: 15px; padding: 24px 18px; text-align: center; box-shadow: 0 4px 16px rgba(123,26,58,.07); border: 1px solid var(--border); transition: .3s; height: 100%; } .wfeat:hover { transform: translateY(-5px); box-shadow: 0 10px 28px rgba(123,26,58,.12); border-color: var(--maroon); } .wfeat .ico { font-size: 2.1rem; margin-bottom: 11px; display: block; } .wfeat h4 { font-family: 'Fredoka One', cursive; font-size: .97rem; color: var(--dark); margin-bottom: 6px; } .wfeat p { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0; } /* ============================================================ 13. PROGRAMS / CLASS CARDS ============================================================ */ .pcard { border-radius: 20px; overflow: hidden; box-shadow: 0 5px 22px rgba(0,0,0,.07); transition: .35s; height: 100%; border: 2px solid transparent; } .pcard:hover { transform: translateY(-8px); box-shadow: 0 16px 44px rgba(0,0,0,.12); } .pcard.ps { border-color: var(--red); } .pcard.nr { border-color: var(--yellow); } .pcard.lk { border-color: var(--green); } .pcard.uk { border-color: var(--purple); } .phd { padding: 24px 20px 14px; } .pcard.ps .phd { background: var(--red-lt); } .pcard.nr .phd { background: var(--yellow-lt); } .pcard.lk .phd { background: var(--green-lt); } .pcard.uk .phd { background: var(--purple-lt); } .pem { font-size: 2.6rem; margin-bottom: 7px; } .phd h3 { font-family: 'Fredoka One', cursive; font-size: 1.25rem; color: var(--dark); } .page-b { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; margin-top: 4px; } .pcard.ps .page-b { background: var(--red); color: #fff; } .pcard.nr .page-b { background: var(--yellow); color: var(--dark); } .pcard.lk .page-b { background: var(--green); color: #fff; } .pcard.uk .page-b { background: var(--purple); color: #fff; } .pbd { padding: 16px 20px 22px; background: #fff; } .pbd p { font-size: .82rem; color: var(--muted); line-height: 1.62; margin-bottom: 12px; } .pfeat { list-style: none; padding: 0; margin: 0 0 14px; } .pfeat li { font-size: .78rem; color: var(--text); padding: 4px 0; display: flex; gap: 6px; align-items: center; } .pcard.ps .pfeat li i { color: var(--red); } .pcard.nr .pfeat li i { color: var(--yellow); } .pcard.lk .pfeat li i { color: var(--green); } .pcard.uk .pfeat li i { color: var(--purple); } .plink { display: inline-flex; align-items: center; gap: 6px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .8rem; padding: 8px 16px; border-radius: 50px; transition: .3s; } .pcard.ps .plink { background: var(--red); color: #fff; } .pcard.nr .plink { background: var(--yellow); color: var(--dark); } .pcard.lk .plink { background: var(--green); color: #fff; } .pcard.uk .plink { background: var(--purple); color: #fff; } .plink:hover { transform: translateY(-2px); opacity: .9; } /* ============================================================ 14. GALLERY GRID ============================================================ */ #gallery { background: var(--soft); } .ggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; } .gcell { border-radius: 13px; overflow: hidden; position: relative; cursor: pointer; } .gcell.tall { grid-row: span 2; } .gcell img { width: 100%; height: 100%; object-fit: cover; min-height: 160px; transition: transform .45s; } .gcell:hover img { transform: scale(1.07); } .gov { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(86,15,40,.75) 100%); opacity: 0; transition: .3s; display: flex; align-items: flex-end; padding: 11px; } .gcell:hover .gov { opacity: 1; } .gov p { color: #fff; font-size: .78rem; font-weight: 700; margin: 0; } /* ============================================================ 15. EVENTS — teaser cards ============================================================ */ .ecard { background: #fff; border-radius: 15px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,.06); border: 1px solid var(--border); display: flex; gap: 15px; align-items: flex-start; transition: .3s; margin-bottom: 12px; } .ecard:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(123,26,58,.1); border-color: var(--maroon); } .edate { border-radius: 11px; padding: 11px 13px; text-align: center; flex-shrink: 0; min-width: 54px; } .edate .day { font-family: 'Fredoka One', cursive; font-size: 1.6rem; line-height: 1; color: #fff; } .edate .mon { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.78); } .einfo h5 { font-family: 'Fredoka One', cursive; font-size: .97rem; color: var(--dark); margin-bottom: 3px; } .einfo p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin-bottom: 7px; } /* Event badge tags */ .ev-tags { display: flex; gap: 6px; flex-wrap: wrap; } .ev-tags span { font-size: .67rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; display: flex; align-items: center; gap: 3px; } .badge-time { background: var(--blue-lt); color: var(--blue); } .badge-loc { background: var(--maroon-lt); color: var(--maroon); } .badge-class { background: var(--green-lt); color: var(--green); } .badge-upcoming { background: var(--yellow-lt); color: #92400e; } .badge-past { background: #f1f5f9; color: var(--muted); } /* ============================================================ 16. TESTIMONIALS SECTION ============================================================ */ #testi { background: linear-gradient(135deg, var(--maroon-dk), var(--maroon)); } .tc { background: rgba(255,255,255,.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15); border-radius: 17px; padding: 26px; height: 100%; } .tstars { color: var(--yellow); font-size: .82rem; margin-bottom: 9px; letter-spacing: 2px; } .tc p { font-size: .88rem; color: rgba(255,255,255,.78); line-height: 1.8; font-style: italic; margin-bottom: 16px; } .tau { display: flex; align-items: center; gap: 10px; } .tau img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--yellow); } .tau .tn { font-family: 'Fredoka One', cursive; font-size: .9rem; color: #fff; } .tau .tr { font-size: .68rem; color: rgba(255,255,255,.44); font-weight: 600; } /* ============================================================ 17. ADMISSION CTA SECTION ============================================================ */ #cta { background: var(--yellow); padding: 68px 0; } #cta h2 { font-family: 'Fredoka One', cursive; font-size: clamp(1.65rem, 3.2vw, 2.65rem); color: var(--dark); margin-bottom: 12px; } #cta p { color: rgba(0,0,0,.58); font-size: .92rem; line-height: 1.8; max-width: 490px; margin-bottom: 22px; } .cbtn1 { background: var(--maroon-dk); color: #fff; padding: 12px 30px; border-radius: 50px; font-family: 'Fredoka One', cursive; font-size: .97rem; transition: .3s; box-shadow: 0 6px 16px rgba(86,15,40,.28); display: inline-block; } .cbtn1:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 10px 26px rgba(86,15,40,.42); } .cbtn2 { border: 2.5px solid var(--dark); color: var(--dark); padding: 10px 26px; border-radius: 50px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .88rem; transition: .3s; display: inline-block; } .cbtn2:hover { background: var(--dark); color: #fff; } .cbox { border-radius: 13px; padding: 16px; text-align: center; display: block; transition: .3s; } .cbox:hover { transform: translateY(-3px); } /* ============================================================ 18. CLASS PAGE HERO ============================================================ */ .cls-hero { padding: 64px 0 44px; position: relative; overflow: hidden; min-height: 280px; } .cls-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; } .cls-hero h1 { font-family: 'Fredoka One', cursive; font-size: clamp(1.8rem, 3.8vw, 3rem); color: #fff; } .cls-hero p { color: rgba(255,255,255,.7); font-size: .92rem; } /* ============================================================ 19. TEACHER CARD (class pages) ============================================================ */ .tcard { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 44px rgba(0,0,0,.1); } .tcard-img { width: 100%; height: 300px; object-fit: cover; object-position: top; } .tcard-body { padding: 24px; } .tcard-body h3 { font-family: 'Fredoka One', cursive; font-size: 1.45rem; color: var(--dark); margin-bottom: 3px; } .tcard-body p { font-size: .86rem; color: var(--muted); line-height: 1.7; margin-bottom: 13px; } .trole { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 10px; } .tq { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: 50px; margin: 2px; } .tsoc { display: flex; gap: 5px; margin-top: 12px; } .tsoc a { width: 30px; height: 30px; background: var(--maroon-lt); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--maroon); font-size: .8rem; transition: .25s; } .tsoc a:hover { background: var(--maroon); color: #fff; } /* ============================================================ 20. CURRICULUM HIGHLIGHT CARDS ============================================================ */ .hicard { background: #fff; border-radius: 15px; padding: 22px 18px; box-shadow: 0 4px 16px rgba(0,0,0,.06); border: 1px solid var(--border); transition: .3s; height: 100%; } .hicard:hover { transform: translateY(-5px); box-shadow: 0 10px 28px rgba(0,0,0,.1); border-left-width: 3px; border-left-style: solid; } .hiico { font-size: 2rem; display: block; margin-bottom: 10px; } .hicard h4 { font-family: 'Fredoka One', cursive; font-size: .97rem; color: var(--dark); margin-bottom: 6px; } .hicard p { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0; } /* ============================================================ 21. PHOTO GALLERY (upload + lightbox — class pages) ============================================================ */ /* Upload zone */ .upload-zone { border-width: 2.5px; border-style: dashed; border-radius: 18px; padding: 36px 20px; text-align: center; cursor: pointer; transition: .3s; margin-bottom: 24px; } .upload-zone:hover, .upload-zone.drag { opacity: .85; transform: scale(1.01); } .upload-zone .utitle { font-family: 'Fredoka One', cursive; font-size: 1.1rem; margin: 8px 0 4px; } .upload-zone .usub { font-size: .77rem; color: var(--muted); margin: 0; } /* Photo grid */ .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .pgitem { border-radius: 13px; overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 4 / 3; background: #e2e8f0; } .pgitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .pgitem:hover img { transform: scale(1.07); } .pgov { position: absolute; inset: 0; background: rgba(0,0,0,.38); opacity: 0; transition: .3s; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; } .pgitem:hover .pgov { opacity: 1; } /* Delete button on photo */ .pdel { position: absolute; top: 7px; right: 7px; background: rgba(220,38,38,.85); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; font-size: .75rem; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 2; } .pgitem:hover .pdel { display: flex; } .pdel:hover { background: #dc2626; transform: scale(1.1); } /* Lightbox */ #lbx { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 99999; align-items: center; justify-content: center; flex-direction: column; } .lbx-active { display: flex !important; } #lbimg { max-width: 92vw; max-height: 86vh; border-radius: 10px; object-fit: contain; } .lbx-btn { position: absolute; background: rgba(255,255,255,.12); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; } .lbx-btn:hover { background: rgba(255,255,255,.25); } #lbx-close { top: 16px; right: 16px; } #lbx-prev { left: 16px; top: 50%; transform: translateY(-50%); } #lbx-next { right: 16px; top: 50%; transform: translateY(-50%); } #lbx-count { position: absolute; bottom: 14px; font-size: .78rem; color: rgba(255,255,255,.55); font-weight: 600; } /* ============================================================ 22. ENROLL STRIP (bottom of class pages) ============================================================ */ .enroll-strip { border-radius: 20px; padding: 36px; position: relative; overflow: hidden; } .enroll-strip h3 { font-family: 'Fredoka One', cursive; font-size: 1.5rem; color: #fff; margin-bottom: 10px; } .enroll-strip p { color: rgba(255,255,255,.78); font-size: .9rem; line-height: 1.7; margin-bottom: 18px; } .ebtn { background: #fff; padding: 11px 26px; border-radius: 50px; font-family: 'Fredoka One', cursive; font-size: .95rem; display: inline-block; transition: .3s; box-shadow: 0 4px 14px rgba(0,0,0,.15); } .ebtn:hover { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(0,0,0,.2); } /* ============================================================ 23. EVENTS FULL PAGE (events.html) ============================================================ */ .pg-hero { padding: 64px 0 44px; position: relative; overflow: hidden; } .pg-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; } .pg-hero h1 { font-family: 'Fredoka One', cursive; font-size: clamp(1.8rem,3.8vw,3rem); color: #fff; margin-bottom: 7px; } .pg-hero p { color: rgba(255,255,255,.68); font-size: .92rem; } /* Year heading separator */ .ev-year-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; margin-top: 10px; } .ev-year-hd .yr { font-family: 'Fredoka One', cursive; font-size: 1.5rem; color: var(--maroon); background: var(--maroon-lt); padding: 6px 18px; border-radius: 50px; } .ev-year-hd::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--maroon-lt), transparent); } /* Full event cards */ .ev-full-card { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 4px 18px rgba(0,0,0,.06); border: 1px solid var(--border); display: flex; gap: 16px; align-items: flex-start; transition: .3s; margin-bottom: 14px; } .ev-full-card:hover { transform: translateX(5px); box-shadow: 0 8px 26px rgba(123,26,58,.1); border-color: var(--maroon); } .ev-date-box { border-radius: 12px; padding: 12px 14px; text-align: center; flex-shrink: 0; min-width: 58px; } .ev-date-box .day { font-family: 'Fredoka One', cursive; font-size: 1.7rem; line-height: 1; color: #fff; } .ev-date-box .mon { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); } .ev-full-info h5 { font-family: 'Fredoka One', cursive; font-size: 1rem; color: var(--dark); margin-bottom: 4px; } .ev-full-info .ev-desc { font-size: .85rem; color: var(--muted); margin: 0 0 8px; line-height: 1.6; } /* Event filter buttons */ .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; } .fbtn { padding: 7px 16px; border-radius: 50px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: .78rem; cursor: pointer; border: 1.5px solid var(--border); background: #fff; color: var(--text); transition: .25s; } .fbtn.active, .fbtn:hover { background: var(--maroon); color: #fff; border-color: var(--maroon); } /* ============================================================ 24. FOOTER ============================================================ */ #ftr { background: var(--dark); color: rgba(255,255,255,.6); padding: 52px 0 0; } .ftr-name { font-family: 'Fredoka One', cursive; font-size: 1.25rem; color: #fff; } .ftr-name span { color: var(--yellow); } .ftr-desc { font-size: .8rem; line-height: 1.8; color: rgba(255,255,255,.42); margin-top: 9px; max-width: 260px; } .ftr-contact p { font-size: .8rem; color: rgba(255,255,255,.48); margin-bottom: 5px; line-height: 1.6; } .ftr-contact strong { color: var(--yellow); } .fsoc a { width: 33px; height: 33px; background: rgba(255,255,255,.07); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: .83rem; transition: .25s; } .fsoc a:hover { background: var(--yellow); color: var(--dark); } .fcol h4 { font-family: 'Fredoka One', cursive; font-size: .92rem; color: var(--yellow); margin-bottom: 13px; } .flinks { list-style: none; padding: 0; margin: 0; } .flinks li { margin-bottom: 7px; } .flinks li a { font-size: .8rem; color: rgba(255,255,255,.42); transition: .25s; display: flex; align-items: center; gap: 4px; } .flinks li a:hover { color: var(--yellow); padding-left: 3px; } .flinks li a i { font-size: .65rem; color: var(--yellow); } .ftr-bot { border-top: 1px solid rgba(255,255,255,.07); padding: 14px 0; margin-top: 34px; font-size: .75rem; color: rgba(255,255,255,.28); text-align: center; } .ftr-bot strong { color: var(--yellow); } /* ============================================================ 25. RESPONSIVE OVERRIDES & MEDIA QUERIES ============================================================ */ /* Extra Small Devices (phones, up to 479px) */ @media (max-width: 479px) { section { padding: 45px 0; } .sec-hd { padding-bottom: 28px; } /* Header */ .hdr-inner { gap: 6px; padding: 7px 0; } .logo-wrap img.limg { width: 44px; height: 44px; } .sname { font-size: .82rem; } .ssub { font-size: .46rem; letter-spacing: .1em; } .smotto { display: none; } .btn-apply { padding: 6px 12px; font-size: .7rem; } .mbtn { font-size: 1.2rem; } /* Hero */ #hero h1 { font-size: 1.65rem; line-height: 1.2; } .h-pill { font-size: .62rem; padding: 5px 12px; } .h-desc { font-size: .85rem; } .cpills { gap: 6px; } .cpill { padding: 6px 10px; font-size: .68rem; } .hbtns { gap: 8px; } .hbtn1 { padding: 10px 20px; font-size: .85rem; } .hbtn2 { padding: 8px 16px; font-size: .78rem; } /* Stats */ .statsbar { padding: 12px 0; } .hsnum { font-size: 1.25rem; } .hslbl { font-size: .52rem; } /* About */ .aimg { height: 220px; } .abadge { padding: 10px 12px; right: -8px; bottom: -8px; } .abadge .n { font-size: 1.5rem; } .abadge .l { font-size: .5rem; } .stk { width: 36px; height: 36px; font-size: 1.2rem; } .stk.s1 { left: -8px; top: 8px; } .stk.s2 { right: -10px; } .aitl { font-size: .82rem; } .alist li { font-size: .8rem; } /* Titles */ .stitle { font-size: 1.35rem; } .slabel { font-size: .58rem; padding: 3px 10px; } .sdesc { font-size: .82rem; } /* Stats cards */ .sc { padding: 20px 10px; } .sc .sn { font-size: 1.8rem; } .sc .sl { font-size: .56rem; } .sc .ico { font-size: 1.5rem; } /* Founder */ .fcard { padding: 20px; } .fimg { width: 100px; height: 100px; } .fname { font-size: 1.15rem; } .ftitle { font-size: .6rem; } .fquote { font-size: .82rem; } .fmini { padding: 10px 12px; } .fmini-n { font-size: 1.1rem; } .fmini-l { font-size: .54rem; } /* Why us */ .wmain { padding: 24px 18px; } .wmain h3 { font-size: 1.2rem; } .wmain p { font-size: .8rem; } .wfeat { padding: 18px 12px; } .wfeat .ico { font-size: 1.7rem; } .wfeat h4 { font-size: .85rem; } .wfeat p { font-size: .74rem; } /* Programs */ .pcard { border-radius: 14px; } .phd { padding: 18px 14px 10px; } .pem { font-size: 2rem; } .phd h3 { font-size: 1rem; } .page-b { font-size: .56rem; } .pbd { padding: 12px 14px 16px; } .pbd p { font-size: .74rem; } .pfeat li { font-size: .7rem; } .plink { font-size: .72rem; padding: 6px 12px; } /* Gallery */ .ggrid { gap: 8px; } .gcell img { min-height: 120px; } .gov p { font-size: .68rem; } /* Events */ .evcard, .ecard { padding: 14px; gap: 10px; } .evdate, .edate { min-width: 44px; padding: 8px 10px; } .evdate .day, .edate .day { font-size: 1.2rem; } .evdate .mon, .edate .mon { font-size: .48rem; } .einfo h5 { font-size: .82rem; } .einfo p { font-size: .74rem; } .etag { font-size: .58rem; padding: 2px 6px; } /* Testimonials */ .tc { padding: 18px; } .tc p { font-size: .8rem; } .tau img { width: 36px; height: 36px; } .tau .tn { font-size: .8rem; } .tau .tr { font-size: .6rem; } /* CTA */ #cta { padding: 45px 0; } #cta h2 { font-size: 1.35rem; } #cta p { font-size: .82rem; } .cbtn1 { padding: 10px 20px; font-size: .85rem; } .cbtn2 { padding: 8px 16px; font-size: .78rem; } .cbox { padding: 12px; } .cbox div:first-child { font-size: 1.4rem; } /* Footer */ #ftr { padding: 40px 0 0; } .ftr-name { font-size: 1rem; } .ftr-desc { font-size: .74rem; } .ftr-contact p { font-size: .74rem; } .fcol h4 { font-size: .82rem; } .flinks li a { font-size: .74rem; } .fsoc a { width: 30px; height: 30px; font-size: .75rem; } .ftr-bot { font-size: .68rem; } /* Class pages */ .cls-hero { padding: 45px 0 30px; min-height: auto; } .cls-hero h1 { font-size: 1.5rem; } .cls-hero p { font-size: .82rem; } .tcard-img { height: 220px; } .tcard-body { padding: 16px; } .tcard-body h3 { font-size: 1.15rem; } .tcard-body p { font-size: .8rem; } .hicard { padding: 16px 12px; } .hicard .hiico { font-size: 1.6rem; } .hicard h4 { font-size: .85rem; } .hicard p { font-size: .74rem; } .enroll-strip { padding: 24px 16px; } .enroll-strip h3 { font-size: 1.2rem; } .enroll-strip p { font-size: .82rem; } .ebtn { padding: 9px 18px; font-size: .85rem; } /* Grid adjustments */ .row { margin-left: -8px; margin-right: -8px; } .row > * { padding-left: 8px; padding-right: 8px; } .g-4, .g-5 { gap: 1rem; } .g-3 { gap: .75rem; } } /* Small Devices (landscape phones, 480px - 575px) */ @media (min-width: 480px) and (max-width: 575px) { section { padding: 48px 0; } .sec-hd { padding-bottom: 30px; } .hdr-inner { gap: 8px; } .logo-wrap img.limg { width: 48px; height: 48px; } .sname { font-size: .92rem; } .smotto { display: none; } .btn-apply { padding: 7px 14px; font-size: .72rem; } #hero h1 { font-size: 1.85rem; } .h-desc { font-size: .88rem; } .cpill { font-size: .72rem; } .statsbar { padding: 13px 0; } .hsnum { font-size: 1.4rem; } .hslbl { font-size: .58rem; } .aimg { height: 260px; } .stitle { font-size: 1.5rem; } .sc .sn { font-size: 2rem; } .fcard { padding: 24px; } .fimg { width: 120px; height: 120px; } .wmain { padding: 28px 20px; } .wfeat { padding: 20px 14px; } .phd { padding: 20px 16px 12px; } .pem { font-size: 2.2rem; } .phd h3 { font-size: 1.1rem; } .tcard-img { height: 260px; } .cls-hero h1 { font-size: 1.7rem; } #cta h2 { font-size: 1.5rem; } } /* Medium Devices (tablets, 576px - 767px) */ @media (min-width: 576px) and (max-width: 767px) { section { padding: 52px 0; } .sname { font-size: 1rem; } .smotto { font-size: .5rem; } .btn-apply { padding: 8px 16px; font-size: .75rem; } #hero h1 { font-size: 2rem; } .h-desc { font-size: .92rem; } .aimg { height: 300px; } .abadge { right: -10px; } .stitle { font-size: 1.6rem; } .sc .sn { font-size: 2.2rem; } .fcard { padding: 28px; } .fimg { width: 130px; height: 130px; } .ggrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .gcell img { min-height: 140px; } .pgrid { grid-template-columns: repeat(2, 1fr); } .tcard-img { height: 280px; } .cls-hero { padding: 50px 0 35px; } .cls-hero h1 { font-size: 1.9rem; } #cta h2 { font-size: 1.65rem; } } /* Large Devices (desktops, 768px - 991px) */ @media (min-width: 768px) and (max-width: 991px) { section { padding: 60px 0; } .sname { font-size: 1.05rem; } nav#nav ul li a { font-size: .76rem; padding: 6px 8px; } #hero h1 { font-size: 2.8rem; } .h-desc { font-size: .96rem; } .aimg { height: 360px; } .stitle { font-size: 1.8rem; } .ggrid { grid-template-columns: repeat(2, 1fr); } .pgrid { grid-template-columns: repeat(2, 1fr); } .tcard-img { height: 280px; } .cls-hero h1 { font-size: 2.2rem; } #cta h2 { font-size: 2rem; } } /* Extra Large Devices (large desktops, 992px - 1199px) */ @media (min-width: 992px) and (max-width: 1199px) { .container { max-width: 960px; } #hero h1 { font-size: 3.5rem; } .aimg { height: 400px; } .ggrid { grid-template-columns: repeat(3, 1fr); } } /* Extra Extra Large (1200px and up) */ @media (min-width: 1200px) { .container { max-width: 1320px; } } /* High DPI / Retina Display Support */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { img[src*=".png"], img[src*=".jpg"], img[src*=".jpeg"] { image-rendering: -webkit-optimize-contrast; } } /* Touch Devices - Larger tap targets */ @media (hover: none) and (pointer: coarse) { nav#nav ul li a, .btn-apply, .hbtn1, .hbtn2, .plink, .cbtn1, .cbtn2, .ebtn, .fbtn, .cbox { min-height: 44px; min-width: 44px; } .cpill { min-height: 40px; padding: 8px 14px; } #stb { width: 50px; height: 50px; } } /* Reduced Motion for Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .marquee-inner { animation: none; } .stk.s1, .stk.s2 { animation: none; } .scrollhint { animation: none; } } /* Landscape Orientation Adjustments */ @media (max-height: 500px) and (orientation: landscape) { #hero { min-height: auto; padding: 60px 0 80px; } .scrollhint { display: none; } } /* Print Styles */ @media print { #hdr, #stb, .topbar, .marquee-wrap, .hbtns, .cpills, .scrollhint { display: none !important; } #hero { min-height: auto; padding: 20px 0; } #hero::after { display: none; } #hero .hbg { display: none; } section { padding: 20px 0; page-break-inside: avoid; } a { text-decoration: underline; } }