/* ============================================================ LearnSpace — Child-Friendly Redesign Inspired by: IXL, Khan Kids, Duolingo Colors: Bright greens, sky blues, warm purples, sunshine yellow Feel: Playful, warm, encouraging, trustworthy ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&display=swap'); :root { /* ── Brand colors (child-friendly palette) ── */ --green: #16A34A; --green-light: #22C55E; --green-bg: #DCFCE7; --green-dark: #15803D; --blue: #2563EB; --blue-light: #3B82F6; --blue-bg: #DBEAFE; --blue-dark: #1D4ED8; --purple: #7C3AED; --purple-light: #8B5CF6; --purple-bg: #EDE9FE; --purple-dark: #6D28D9; --yellow: #F59E0B; --yellow-light: #FCD34D; --yellow-bg: #FEF9C3; --yellow-dark: #D97706; --orange: #EA580C; --orange-bg: #FFEDD5; --pink: #EC4899; --pink-bg: #FCE7F3; --teal: #0D9488; --teal-light: #2DD4BF; --teal-bg: #F0FDFA; --teal-dark: #0F766E; /* ── Legacy aliases (keep portals working) ── */ --navy: #1E3A5F; --navy-dark: #0F2340; --navy-light: #2A5298; --math: #16A34A; --math-bg: #DCFCE7; --math-mid: #22C55E; --eng: #7C3AED; --eng-bg: #EDE9FE; --eng-mid: #8B5CF6; --amber: #F59E0B; --amber-bg: #FEF9C3; --amber-dark: #D97706; /* ── Neutrals ── */ --bg: #F0F7FF; --white: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-400: #94A3B8; --gray-600: #475569; --gray-800: #1E293B; --text: #1E293B; --text-muted: #64748B; --success: #16A34A; --danger: #DC2626; /* ── Shape & shadow ── */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow: 0 6px 24px rgba(0,0,0,.1); --shadow-lg: 0 12px 40px rgba(0,0,0,.14); --shadow-color: 0 6px 24px rgba(37,99,235,.15); --transition: 0.2s ease; --max-w: 1140px; /* ── Typography ── */ --font-head: 'Nunito', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: monospace; } /* ============================================================ Student portal grade themes — set via [data-grade-theme] on in portal/student.html, derived from the student's grade. Never applied anywhere else, so the teacher portal and marketing pages are unaffected regardless of what's defined here. ============================================================ */ [data-grade-theme="nature"] { --theme-primary: #16A34A; --theme-primary-light: #4ADE80; --theme-secondary: #0EA5E9; --theme-secondary-light:#7DD3FC; --theme-tint: #ECFDF5; --theme-tint-2: #F0F9FF; --theme-accent-dark: #15803D; --theme-gradient: linear-gradient(135deg, #16A34A 0%, #0EA5E9 100%); /* Sidebar — lightest and friendliest of the four */ --side-bg: #EFFBF4; --side-border: #D9EEE0; --side-logo-bg: #16A34A; --side-text: #1F2A24; --side-text-muted: #4B6358; --side-active-bg: #D5F0E0; --side-active-text: #15803D; --side-active-border: #16A34A; --side-hover-bg: #E4F5EA; --side-icon: #4B6358; --side-icon-active: #16A34A; } [data-grade-theme="space"] { --theme-primary: #3B5BDB; --theme-primary-light: #93C5FD; --theme-secondary: #8B5CF6; --theme-secondary-light:#C4B5FD; --theme-tint: #EFF6FF; --theme-tint-2: #F5F3FF; --theme-accent-dark: #1E3A8A; --theme-gradient: linear-gradient(135deg, #3B5BDB 0%, #8B5CF6 100%); /* Sidebar — cool indigo tint, slightly richer than Nature */ --side-bg: #EEF1FC; --side-border: #DCE1F6; --side-logo-bg: #3B5BDB; --side-text: #1E2A5E; --side-text-muted: #525B85; --side-active-bg: #D9DFF8; --side-active-text: #1E3A8A; --side-active-border: #3B5BDB; --side-hover-bg: #E3E7FA; --side-icon: #525B85; --side-icon-active: #3B5BDB; } [data-grade-theme="engineering"] { --theme-primary: #0D9488; --theme-primary-light: #2DD4BF; --theme-secondary: #EA580C; --theme-secondary-light:#FDBA74; --theme-tint: #F0FDFA; --theme-tint-2: #FFF7ED; --theme-accent-dark: #0F766E; --theme-gradient: linear-gradient(135deg, #0D9488 0%, #EA580C 100%); /* Sidebar — neutral teal-gray, modern STEM feel */ --side-bg: #F1F7F6; --side-border: #DCEBE8; --side-logo-bg: #0D9488; --side-text: #1B3330; --side-text-muted: #4E6864; --side-active-bg: #D6EBE9; --side-active-text: #0F766E; --side-active-border: #0D9488; --side-hover-bg: #E5F1EF; --side-icon: #4E6864; --side-icon-active: #0D9488; } [data-grade-theme="stem"] { --theme-primary: #3730A3; --theme-primary-light: #818CF8; --theme-secondary: #7C3AED; --theme-secondary-light:#A78BFA; --theme-tint: #EEF2FF; --theme-tint-2: #F5F3FF; --theme-accent-dark: #3730A3; --theme-gradient: linear-gradient(135deg, #3730A3 0%, #7C3AED 100%); /* Sidebar — deliberately dark and mature; indigo/violet, not navy/amber */ --side-bg: #14162B; --side-border: #2A2C46; --side-logo-bg: #3730A3; --side-text: #E4E4EE; --side-text-muted: rgba(255,255,255,.5); --side-active-bg: #271C4E; --side-active-text: #FFFFFF; --side-active-border: #7C3AED; --side-hover-bg: rgba(255,255,255,.06); --side-icon: rgba(255,255,255,.55); --side-icon-active: #A78BFA; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; } ul { list-style: none; } /* ── Layout ── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; } .section { padding: 5rem 0; } .section-sm { padding: 3rem 0; } /* ── Typography ── */ h1,h2,h3,h4,h5 { font-family: var(--font-head); font-weight: 800; line-height: 1.2; color: var(--text); } h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); } h3 { font-size: 1.35rem; } h4 { font-size: 1.1rem; } p { color: var(--text-muted); line-height: 1.8; } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: .5rem; display: block; } .section-title { text-align: center; margin-bottom: .75rem; } .section-sub { text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem; font-size: 1.05rem; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 100px; font-family: var(--font-head); font-weight: 700; font-size: 15px; border: 2.5px solid transparent; transition: all var(--transition); white-space: nowrap; letter-spacing: .01em; } .btn-primary { background: var(--yellow); color: #fff; border-color: var(--yellow); } .btn-primary:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,158,11,.35); } .btn-secondary { background: transparent; color: var(--blue); border-color: var(--blue); } .btn-secondary:hover { background: var(--blue); color: #fff; transform: translateY(-2px); } .btn-white { background: #fff; color: var(--blue-dark); border-color: #fff; } .btn-white:hover { background: var(--blue-bg); transform: translateY(-2px); } .btn-math { background: var(--green); color: #fff; border-color: var(--green); } .btn-math:hover { background: var(--green-dark); transform: translateY(-2px); } .btn-eng { background: var(--purple); color: #fff; border-color: var(--purple); } .btn-eng:hover { background: var(--purple-dark); transform: translateY(-2px); } .btn-success { background: var(--green); color: #fff; border-color: var(--green); } .btn-success:hover { background: var(--green-dark); } .btn-danger { background: #FEE2E2; color: var(--danger); border-color: #FCA5A5; } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-lg { padding: 16px 36px; font-size: 17px; } .btn-sm { padding: 8px 18px; font-size: 13px; } .btn-full { width: 100%; justify-content: center; } /* ── Cards ── */ .card { background: var(--white); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); border: 2px solid var(--gray-100); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-bg); } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; } .badge-math { background: var(--green-bg); color: var(--green-dark); } .badge-english { background: var(--purple-bg); color: var(--purple-dark); } .badge-amber { background: var(--yellow-bg); color: var(--yellow-dark); } .badge-navy { background: var(--blue-bg); color: var(--blue-dark); } .badge-success { background: var(--green-bg); color: var(--green-dark); } .badge-warning { background: var(--yellow-bg); color: var(--yellow-dark); } /* ── Forms ── */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; font-family: var(--font-head); } .form-label span { color: var(--danger); margin-left: 2px; } .form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block; } .form-input { width: 100%; padding: 12px 16px; border: 2px solid var(--gray-200); border-radius: var(--radius); font-size: 15px; font-family: var(--font-body); color: var(--text); background: var(--white); outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,.1); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } textarea.form-input { min-height: 110px; resize: vertical; } select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .checkbox-group { display: flex; gap: 10px; align-items: flex-start; margin-bottom: .75rem; } .checkbox-group input[type=checkbox] { margin-top: 3px; accent-color: var(--blue); width: 16px; height: 16px; flex-shrink: 0; } .consent-box { background: var(--gray-50); border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; font-size: 14px; color: var(--text-muted); max-height: 200px; overflow-y: auto; line-height: 1.8; } .consent-box h4 { color: var(--text); margin-bottom: .75rem; font-size: 15px; } .consent-box p { margin-bottom: .75rem; } /* ── Navigation ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-bottom: 2px solid var(--gray-100); transition: box-shadow var(--transition); } .nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.08); } .nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; position: relative; } .nav-logo { font-family: var(--font-head); font-weight: 900; font-size: 22px; color: var(--blue-dark); display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav-logo-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--purple)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-logo-icon i { color: #fff; font-size: 20px; } .nav-links { display: flex; align-items: center; gap: .25rem; flex: 1; } .nav-link { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--text-muted); padding: 8px 14px; border-radius: 100px; transition: all var(--transition); } .nav-link:hover { color: var(--blue); background: var(--blue-bg); } .nav-link.active { color: var(--blue); background: var(--blue-bg); } .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .nav-signin { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--blue); padding: 8px 16px; border-radius: 100px; border: 2px solid var(--blue-bg); transition: all var(--transition); } .nav-signin:hover { background: var(--blue-bg); } .nav-register { background: var(--green); color: #fff; border-color: var(--green); padding: 10px 20px; font-size: 14px; } .nav-register:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; } .hamburger span { display: block; width: 22px; height: 2.5px; background: var(--text); border-radius: 2px; transition: all var(--transition); } /* ── Mobile menu ── */ .mobile-menu { display: none; flex-direction: column; gap: 4px; position: fixed; top: 68px; left: 0; right: 0; background: #fff; padding: 1rem 1.5rem 1.5rem; border-bottom: 2px solid var(--gray-100); z-index: 99; box-shadow: 0 8px 30px rgba(0,0,0,.1); } .mobile-menu.open { display: flex; } .mobile-menu .nav-link { font-size: 16px; padding: 12px 16px; } .mobile-menu .nav-actions { flex-direction: column; margin: .5rem 0 0; } /* ── Hero ── */ .hero { padding: 9rem 0 5rem; background: linear-gradient(160deg, #EFF6FF 0%, #F0FDF4 50%, #FAF5FF 100%); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(37,99,235,.08) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(124,58,237,.07) 0%, transparent 50%), radial-gradient(circle at 60% 80%, rgba(22,163,74,.07) 0%, transparent 50%); pointer-events: none; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--green-bg); color: var(--green-dark); padding: 6px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; margin-bottom: 1.5rem; border: 2px solid rgba(22,163,74,.2); } .hero h1 { color: var(--text); margin-bottom: 1.25rem; } .hero h1 .highlight { color: var(--blue); position: relative; display: inline-block; } .hero h1 .highlight::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 6px; background: var(--yellow-bg); border-radius: 4px; z-index: -1; } .hero-sub { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 480px; line-height: 1.75; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 2.5rem; } .hero-subjects { display: flex; gap: 10px; flex-wrap: wrap; } .hero-subject-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; border: 2px solid; transition: all var(--transition); font-family: var(--font-head); } .hero-subject-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .pill-math { background: var(--green-bg); color: var(--green-dark); border-color: rgba(22,163,74,.3); } .pill-eng { background: var(--purple-bg); color: var(--purple-dark); border-color: rgba(124,58,237,.3); } /* ── Hero visual ── */ .hero-visual { position: relative; } .hero-card-stack { position: relative; } .hero-main-card { background: #fff; border-radius: var(--radius-xl); padding: 2rem; box-shadow: 0 20px 60px rgba(37,99,235,.15); border: 2px solid var(--blue-bg); position: relative; z-index: 2; } .hero-card-grade-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; } .grade-bubble { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 14px; cursor: pointer; transition: all var(--transition); border: 2.5px solid transparent; flex-shrink: 0; } .grade-bubble:hover { transform: scale(1.15); } .gb-k { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; } .gb-1 { background: #FFEDD5; color: #C2410C; border-color: #FDBA74; } .gb-2 { background: var(--yellow-bg); color: var(--yellow-dark); border-color: #FCD34D; } .gb-3 { background: #DCFCE7; color: #15803D; border-color: #86EFAC; } .gb-4 { background: #D1FAE5; color: #047857; border-color: #6EE7B7; } .gb-5 { background: #CFFAFE; color: #0E7490; border-color: #67E8F9; } .gb-6 { background: var(--blue-bg); color: var(--blue-dark); border-color: #93C5FD; } .gb-7 { background: var(--purple-bg); color: var(--purple-dark); border-color: #C4B5FD; } .gb-8 { background: var(--pink-bg); color: #BE185D; border-color: #F9A8D4; } .gb-9 { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; } .gb-10 { background: #FFEDD5; color: #C2410C; border-color: #FDBA74; } .gb-11 { background: var(--yellow-bg); color: var(--yellow-dark); border-color: #FCD34D; } .gb-12 { background: var(--green-bg); color: var(--green-dark); border-color: #86EFAC; } .hero-subject-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; } .hero-subject-card { padding: 1rem; border-radius: var(--radius); border: 2px solid; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all var(--transition); text-decoration: none; } .hero-subject-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); } .hsc-math { border-color: rgba(22,163,74,.3); background: var(--green-bg); } .hsc-eng { border-color: rgba(124,58,237,.3); background: var(--purple-bg); } .hsc-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .hsc-math .hsc-icon { background: var(--green); } .hsc-eng .hsc-icon { background: var(--purple); } .hsc-title { font-family: var(--font-head); font-weight: 800; font-size: 14px; margin-bottom: 2px; } .hsc-math .hsc-title { color: var(--green-dark); } .hsc-eng .hsc-title { color: var(--purple-dark); } .hsc-sub { font-size: 12px; color: var(--text-muted); } .hero-floating-badge { position: absolute; background: #fff; border-radius: var(--radius); padding: .625rem 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); font-family: var(--font-head); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; border: 2px solid var(--gray-100); animation: float 3s ease-in-out infinite; } @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } .badge-top { top: -18px; right: 20px; animation-delay: .5s; } .badge-bottom { bottom: -18px; left: 20px; } /* ── Hero stats ── */ .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; } .hero-stat { background: #fff; border-radius: var(--radius); padding: 1.25rem; text-align: center; border: 2px solid var(--gray-100); box-shadow: var(--shadow-sm); } .hero-stat-num { font-family: var(--font-head); font-size: 2rem; font-weight: 900; line-height: 1; margin-bottom: 4px; } .hero-stat-lbl { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* ── Subject spotlight ── */ .benefits-bg { background: linear-gradient(180deg, #fff 0%, #F0F7FF 100%); } .spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } .spotlight-subject-card { border-radius: var(--radius-xl); padding: 2.5rem; position: relative; overflow: hidden; } .spotlight-math { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); border: 2px solid rgba(22,163,74,.2); } .spotlight-eng { background: linear-gradient(135deg, #FAF5FF, #EDE9FE); border: 2px solid rgba(124,58,237,.2); } .spotlight-icon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 1.25rem; } .spotlight-math .spotlight-icon { background: var(--green); } .spotlight-eng .spotlight-icon { background: var(--purple); } .spotlight-subject-card h3 { font-size: 1.5rem; margin-bottom: .5rem; } .spotlight-math h3 { color: var(--green-dark); } .spotlight-eng h3 { color: var(--purple-dark); } .spotlight-features { display: flex; flex-direction: column; gap: 8px; margin: 1.25rem 0 1.5rem; } .spotlight-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text); } .sf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .spotlight-math .sf-dot { background: var(--green); } .spotlight-eng .sf-dot { background: var(--purple); } /* ── Why section ── */ .why-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: center; } .why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .why-card { padding: 1.5rem; border-radius: var(--radius-lg); border: 2px solid var(--gray-100); background: #fff; transition: all var(--transition); } .why-card:hover { border-color: var(--blue-bg); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .why-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 1rem; } .why-card h4 { font-size: 15px; margin-bottom: .375rem; color: var(--text); } .why-card p { font-size: 13px; line-height: 1.65; } /* ── Volunteer section ── */ .volunteer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: center; } .volunteer-section { background: linear-gradient(135deg, #1E3A5F, #2563EB); border-radius: var(--radius-xl); padding: 3rem; } .volunteer-section h2 { color: #fff; } .volunteer-section p { color: rgba(255,255,255,.8); } .volunteer-types { display: flex; flex-direction: column; gap: 1rem; } .vol-type { display: flex; gap: 1rem; padding: 1.25rem; border-radius: var(--radius); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); transition: all var(--transition); } .vol-type:hover { background: rgba(255,255,255,.18); } .vol-type-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .vol-type h4 { color: #fff; margin-bottom: 3px; font-size: 15px; } .vol-type p { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; } /* ── Testimonials ── */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .testimonial-card { padding: 2rem; } .testimonial-stars { color: var(--yellow); font-size: 18px; margin-bottom: 1rem; letter-spacing: 3px; } .testimonial-text { font-style: italic; margin-bottom: 1.25rem; font-size: 15px; line-height: 1.8; color: var(--text); } .testimonial-author { display: flex; align-items: center; gap: 10px; } .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 16px; } .testimonial-name { font-weight: 700; font-size: 14px; color: var(--text); } .testimonial-role { font-size: 12px; color: var(--text-muted); } /* ── CTA section ── */ .cta-section { background: linear-gradient(135deg, #2563EB, #7C3AED); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.08) 0%, transparent 60%), radial-gradient(circle at 70% 50%, rgba(255,255,255,.06) 0%, transparent 60%); } .cta-section h2 { color: #fff; position: relative; z-index: 1; } .cta-section p { color: rgba(255,255,255,.85); margin-bottom: 2rem; font-size: 1.1rem; position: relative; z-index: 1; } .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* ── Footer ── */ .footer { background: var(--gray-800); color: rgba(255,255,255,.75); padding: 4rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .footer-logo { font-family: var(--font-head); font-weight: 900; font-size: 20px; color: #fff; display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; } .footer-logo-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--purple)); display: flex; align-items: center; justify-content: center; } .footer-logo-icon i { color: #fff; font-size: 18px; } .footer-desc { font-size: 14px; line-height: 1.8; margin-bottom: 1.25rem; color: rgba(255,255,255,.55); } .footer h4 { color: #fff; font-family: var(--font-head); font-size: 13px; font-weight: 800; margin-bottom: 1rem; letter-spacing: .06em; text-transform: uppercase; } .footer-links { display: flex; flex-direction: column; gap: 8px; } .footer-links a { font-size: 14px; color: rgba(255,255,255,.55); transition: color var(--transition); } .footer-links a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .footer-bottom p { font-size: 13px; color: rgba(255,255,255,.35); } .footer-legal { display: flex; gap: 1.25rem; } .footer-legal a { font-size: 13px; color: rgba(255,255,255,.35); transition: color var(--transition); } .footer-legal a:hover { color: rgba(255,255,255,.7); } /* ── Page header ── */ .page-header { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 60%, var(--purple) 100%); padding: 7rem 0 3.5rem; } .page-header h1 { color: #fff; margin-bottom: .5rem; } .page-header p { color: rgba(255,255,255,.8); font-size: 1.05rem; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.5); margin-bottom: 1rem; } .breadcrumb a { color: rgba(255,255,255,.65); transition: color var(--transition); } .breadcrumb a:hover { color: #fff; } /* ── Auth pages ── */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #EFF6FF, #FAF5FF); padding: 2rem 1rem; padding-top: 80px; } .auth-card { background: var(--white); border-radius: var(--radius-xl); padding: 2.5rem; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(37,99,235,.15); border: 2px solid var(--gray-100); } .auth-logo { text-align: center; margin-bottom: 1.5rem; } .auth-logo-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--blue), var(--purple)); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .auth-logo-icon i { color: #fff; font-size: 24px; } .auth-title { font-family: var(--font-head); font-size: 1.625rem; font-weight: 900; color: var(--text); margin-bottom: 4px; } .auth-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 1.75rem; } .auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); } .auth-divider span { font-size: 13px; color: var(--text-muted); } .auth-footer { text-align: center; margin-top: 1.5rem; font-size: 14px; color: var(--text-muted); } .auth-footer a { color: var(--blue); font-weight: 700; } .role-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 1.75rem; } .role-tab { padding: 12px 8px; border-radius: var(--radius); border: 2px solid var(--gray-200); background: transparent; font-size: 13px; font-weight: 700; color: var(--text-muted); text-align: center; cursor: pointer; transition: all var(--transition); font-family: var(--font-head); } .role-tab:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); } .role-tab.active { border-color: var(--blue); background: var(--blue); color: #fff; } .role-tab i { display: block; font-size: 22px; margin-bottom: 4px; } /* ── Register ── */ .register-wrap { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem; padding-top: 90px; } .register-card { background: var(--white); border-radius: var(--radius-xl); padding: 2.5rem; box-shadow: var(--shadow); border: 2px solid var(--gray-100); } .progress-bar { height: 8px; background: var(--gray-200); border-radius: 4px; margin-bottom: 2rem; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 4px; transition: width .4s ease; } .interest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .interest-option { border: 2.5px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; cursor: pointer; transition: all var(--transition); position: relative; } .interest-option:hover { border-color: var(--blue); transform: translateY(-2px); } .interest-option.selected-math { border-color: var(--green); background: var(--green-bg); } .interest-option.selected-eng { border-color: var(--purple); background: var(--purple-bg); } .interest-option h4 { font-family: var(--font-head); margin-bottom: 4px; } .interest-option p { font-size: 13px; } .interest-check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; } .interest-check-math { background: var(--green); color: #fff; } .interest-check-eng { background: var(--purple); color: #fff; } .success-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .consent-box { background: var(--gray-50); border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; font-size: 14px; color: var(--text-muted); max-height: 200px; overflow-y: auto; line-height: 1.8; } /* ── Alerts ── */ .alert { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; font-weight: 500; } .alert-success { background: var(--green-bg); color: var(--green-dark); border: 2px solid rgba(22,163,74,.3); } .alert-error { background: #FEE2E2; color: #DC2626; border: 2px solid #FCA5A5; } .alert-info { background: var(--blue-bg); color: var(--blue-dark); border: 2px solid rgba(37,99,235,.2); } /* ── Utilities ── */ .text-center { text-align: center; } .text-navy { color: var(--blue-dark); } .text-math { color: var(--green); } .text-eng { color: var(--purple); } .text-amber { color: var(--yellow); } .text-muted { color: var(--text-muted); } .mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem} .mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem} .hidden{display:none !important} .flex{display:flex}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-3{gap:1rem} .divider{height:1px;background:var(--gray-200);margin:1.5rem 0} .empty{text-align:center;padding:2rem;color:var(--text-muted);font-size:14px} /* ── Responsive ── */ @media(max-width:1024px){ .footer-grid{grid-template-columns:1fr 1fr} .why-grid,.volunteer-grid,.spotlight-grid{grid-template-columns:1fr;gap:2rem} } @media(max-width:768px){ .section{padding:3.5rem 0} .nav-links{display:none} .hamburger{display:flex} .hero{padding:6rem 0 3.5rem} .hero-inner{grid-template-columns:1fr;gap:2.5rem} .hero-visual{display:none} .hero-stats{grid-template-columns:repeat(3,1fr);gap:.75rem} .hero-stat-num{font-size:1.5rem} .why-cards{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr;gap:2rem} .footer-bottom{flex-direction:column;text-align:center} .form-row{grid-template-columns:1fr} .role-tabs{grid-template-columns:repeat(3,1fr)} .interest-grid{grid-template-columns:1fr} .hero-card-grade-row{gap:6px} .grade-bubble{width:38px;height:38px;font-size:12px} } @media(max-width:480px){ .hero h1{font-size:2rem} .hero-actions{flex-direction:column} .hero-actions .btn{width:100%;justify-content:center} .hero-subjects{flex-direction:column} .hero-stats{grid-template-columns:1fr} .cta-actions{flex-direction:column} .cta-actions .btn{width:100%;justify-content:center} .auth-card{padding:1.75rem 1.25rem} .register-card{padding:1.5rem 1.25rem} .why-cards{grid-template-columns:1fr} }